React 思维导图模板_ProcessOn思维导图、流程图

简介

React 是一个用于构建用户界面的 JAVASCRIPT 库。<br><br>React 主要用于构建 UI，很多人认为 React 是 MVC 中的 V（图）。<br><br>React 起源于 Facebook 的内部项目，用于构建 Instagram 的网站，并于 2013 年 5 月开源。<br><br>React 拥有更高的性能，代号发布非常简单，越来越多的人开始关注并使用它。

特点

1.声明式设计−React采用声明范式，可以轻松描述应用。<br><br>2.高效−React通过对DOM的模拟，最大限度地减少与DOM的交互。<br><br>3.灵活−React可以与已知的库或框架很好地结合。<br><br>4.JSX − JSX 是 JavaScript 语言的扩展。React 开发并不一定使用 JSX ，但我们建议使用它。<br><br>5.组件− 通过React构建组件，使用代号更容易得到复用，能够很好的应用在大项目的开发中。<br><br>6.单向响应的数据流− React 实现了单向响应的数据流，从而减少了一些重新生成代码，这也是为什么比传统数据绑定更简单。<br><br>

安装

示例

<!DOCTYPE html><br><html><br><head><br><meta charset="UTF-8" /><br><title>Hello React!</title><br><script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script><br><script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script><br><script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script><br></head><br><body><br> <br><div id="example"></div><br><script type="text/babel"><br>ReactDOM.render(<br>    <h1>Hello, world!</h1>,<br>    document.getElementById('example')<br>);<br></script><br> <br></body><br></html>

实例中我们引入了三个库： react.development.min.js 、react-dom.development.min.js 和 babel.min.js：<br><br>react.min.js - React 的核心库<br>react-dom.min.js - 提供与 DOM 相关的功能<br>babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。<br>

通过 npm 使用 React

淘宝

$ npm install -g cnpm --registry=https://registry.npmmirror.com<br>$ npm config set registry https://registry.npmmirror.com

cnpm install [name]

使用 create-react-app 快速构建 React 开发环境

create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。<br><br>create-react-app 自动创建的项目是基于 Webpack + ES6 。

$ cnpm install -g create-react-app<br>$ create-react-app my-app<br>$ cd my-app/<br>$ npm start

React 元素渲染

要将React元素渲染到根DOM节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上

const element = <h1>Hello, world!</h1>;<br>ReactDOM.render(<br>    element,<br>    document.getElementById('example')<br>);

更新元素渲染

function tick() {<br>  const element = (<br>    <div><br>      <h1>Hello, world!</h1><br>      <h2>现在是 {new Date().toLocaleTimeString()}.</h2><br>    </div><br>  );<br>  ReactDOM.render(<br>    element,<br>    document.getElementById('example')<br>  );<br>}<br> <br>setInterval(tick, 1000);

React 元素都是不可变的。当元素被创建之后，你是无法改变其内容或属性的。<br><br>目前更新界面的唯一办法是创建一个新的元素，然后将它传入 ReactDOM.render() 方法：

React JSX

React 使用 JSX 来替代常规的 JavaScript。<br><br>JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

使用 JSX

ReactDOM.render(<br>    <div><br>    <h1>菜鸟教程</h1><br>    <h2>欢迎学习 React</h2><br>    <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p><br>    </div><br>    ,<br>    document.getElementById('example')<br>);

JavaScript 表达式

ReactDOM.render(<br>    <div><br>      <h1>{i == 1 ? 'True!' : 'False'}</h1><br>    </div><br>    ,<br>    document.getElementById('example')<br>);

样式

var myStyle = {<br>    fontSize: 100,<br>    color: '#FF0000'<br>};<br>ReactDOM.render(<br>    <h1 style = {myStyle}>菜鸟教程</h1>,<br>    document.getElementById('example')<br>);

注释

数组

var arr = [<br>  <h1>菜鸟教程</h1>,<br>  <h2>学的不仅是技术，更是梦想！</h2>,<br>];<br>ReactDOM.render(<br>  <div>{arr}</div>,<br>  document.getElementById('example')<br>);

React 组件

function HelloMessage(props) {<br>    return <h1>Hello World!</h1>;<br>}<br> <br>const element = <HelloMessage />;<br> <br>ReactDOM.render(<br>    element,<br>    document.getElementById('example')<br>);

复合组件

function Name(props) {<br>    return <h1>网站名称：{props.name}</h1>;<br>}<br>function Url(props) {<br>    return <h1>网站地址：{props.url}</h1>;<br>}<br>function Nickname(props) {<br>    return <h1>网站小名：{props.nickname}</h1>;<br>}<br>function App() {<br>    return (<br>    <div><br>        <Name name="菜鸟教程" /><br>        <Url url="http://www.runoob.com" /><br>        <Nickname nickname="Runoob" /><br>    </div><br>    );<br>}<br> <br>ReactDOM.render(<br>     <App />,<br>    document.getElementById('example')<br>);<br>

React State(状态)

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。<br><br>React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。<br><br>以下实例创建一个名称扩展为 React.Component 的 ES6 类，在 render() 方法中使用 this.state 来修改当前的时间。<br><br>添加一个类构造函数来初始化状态 this.state，类组件应始终使用 props 调用基础构造函数。

class Clock extends React.Component {<br>  constructor(props) {<br>    super(props);<br>    this.state = {date: new Date()};<br>  }<br> <br>  render() {<br>    return (<br>      <div><br>        <h1>Hello, world!</h1><br>        <h2>现在是 {this.state.date.toLocaleTimeString()}.</h2><br>      </div><br>    );<br>  }<br>}<br> <br>ReactDOM.render(<br>  <Clock />,<br>  document.getElementById('example')<br>);

React Props

tate 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。

function HelloMessage(props) {<br>    return <h1>Hello {props.name}!</h1>;<br>}<br> <br>const element = <HelloMessage name="Runoob"/>;<br> <br>ReactDOM.render(<br>    element,<br>    document.getElementById('example')<br>);

React 事件处理

React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同:<br><br>React 事件绑定属性的命名采用驼峰式写法，而不是小写。<br>如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)

function ActionLink() {<br>  function handleClick(e) {<br>    e.preventDefault();<br>    console.log('链接被点击');<br>  }<br> <br>  return (<br>    <a href="#" onClick={handleClick}><br>      点我<br>    </a><br>  );<br>}

React 条件渲染

在 React 中，你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。<br><br>React 中的条件渲染和 JavaScript 中的一致，使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素，然后让 React 根据它们来更新 UI。

function Greeting(props) {<br>  const isLoggedIn = props.isLoggedIn;<br>  if (isLoggedIn) {<br>    return <UserGreeting />;<br>  }<br>  return <GuestGreeting />;<br>}<br> <br>ReactDOM.render(<br>  // 尝试修改 isLoggedIn={true}:<br>  <Greeting isLoggedIn={false} />,<br>  document.getElementById('example')<br>);

React 列表 & Keys

const numbers = [1, 2, 3, 4, 5];<br>const listItems = numbers.map((numbers) =><br>  <li>{numbers}</li><br>);<br> <br>ReactDOM.render(<br>  <ul>{listItems}</ul>,<br>  document.getElementById('example')<br>);

React 组件 API

在本章节中我们将讨论 React 组件 API。我们将讲解以下7个方法:<br><br>设置状态：setState<br>替换状态：replaceState<br>设置属性：setProps<br>替换属性：replaceProps<br>强制更新：forceUpdate<br>获取DOM节点：findDOMNode<br>判断组件挂载状态：isMounted

React 组件生命周期

组合的生命周期可分为三个状态：<br><br>Mounting(挂载)：已插入真实DOM<br>Updating(更新)：正在被重新冲洗染<br>卸载(卸载)：已移出真实DOM

挂载

当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：<br><br>constructor(): 在 React 组件挂载之前，会调用它的构造函数。<br>getDerivedStateFromProps(): 在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。<br>render(): render() 方法是 class 组件中唯一必须实现的方法。<br>componentDidMount(): 在组件挂载后（插入 DOM 树中）立即调用。<br>render() 方法是 class 组件中唯一必须实现的方法，其他方法可以根据自己的需要来实现。

更新

每当组件的 state 或 props 发生变化时，组件就会更新。<br><br>当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：<br><br>getDerivedStateFromProps(): 在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。根据 shouldComponentUpdate() 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。<br>shouldComponentUpdate():当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。<br>render(): render() 方法是 class 组件中唯一必须实现的方法。<br>getSnapshotBeforeUpdate(): 在最近一次渲染输出（提交到 DOM 节点）之前调用。<br>componentDidUpdate(): 在更新后会被立即调用。<br>render() 方法是 class 组件中唯一必须实现的方法，其他方法可以根据自己的需要来实现。

卸载

当组件从 DOM 中移除时会调用如下方法：<br><br>componentWillUnmount(): 在组件卸载及销毁之前直接调用。

React AJAX

React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据时可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。<br><br>当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成的请求。

class UserGist extends React.Component {<br>  constructor(props) {<br>      super(props);<br>      this.state = {username: '', lastGistUrl: ''};<br>  }<br> <br> <br>  componentDidMount() {<br>    this.serverRequest = $.get(this.props.source, function (result) {<br>      var lastGist = result[0];<br>      this.setState({<br>        username: lastGist.owner.login,<br>        lastGistUrl: lastGist.html_url<br>      });<br>    }.bind(this));<br>  }<br> <br>  componentWillUnmount() {<br>    this.serverRequest.abort();<br>  }<br> <br>  render() {<br>    return (<br>      <div><br>        {this.state.username} 用户最新的 Gist 共享地址：<br>        <a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a><br>      </div><br>    );<br>  }<br>}<br> <br>ReactDOM.render(<br>  <UserGist source="https://api.github.com/users/octocat/gists" />,<br>  document.getElementById('example')<br>);

React 表单与事件

本章节我们将讨论如何在 React 中使用表单。<br><br>HTML 表单元素与 React 中的其他 DOM 元素有所不同,因为表单元素生来就保留一些内部状态。<br><br>在 HTML 当中，像 <input>, <textarea>, 和 <select> 这类表单元素会维持自身状态，并根据用户输入进行更新。但在React中，可变的状态通常保存在组件的状态属性中，并且只能用 setState() 方法进行更新。

class HelloMessage extends React.Component {<br>  constructor(props) {<br>      super(props);<br>      this.state = {value: 'Hello Runoob!'};<br>      this.handleChange = this.handleChange.bind(this);<br>  }<br> <br>  handleChange(event) {<br>    this.setState({value: event.target.value});<br>  }<br>  render() {<br>    var value = this.state.value;<br>    return <div><br>            <input type="text" value={value} onChange={this.handleChange} /> <br>            <h4>{value}</h4><br>           </div>;<br>  }<br>}<br>ReactDOM.render(<br>  <HelloMessage />,<br>  document.getElementById('example')<br>);

React Refs

React 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上。<br><br>这个特殊的属性允许你引用 render() 返回的相应的支撑实例（ backing instance ）。这样就可以确保在任何时间总是拿到正确的实例。

class MyComponent extends React.Component {<br>  handleClick() {<br>    // 使用原生的 DOM API 获取焦点<br>    this.refs.myInput.focus();<br>  }<br>  render() {<br>    //  当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs<br>    return (<br>      <div><br>        <input type="text" ref="myInput" /><br>        <input<br>          type="button"<br>          value="点我输入框获取焦点"<br>          onClick={this.handleClick.bind(this)}<br>        /><br>      </div><br>    );<br>  }<br>}<br> <br>ReactDOM.render(<br>  <MyComponent />,<br>  document.getElementById('example')<br>);