React

(1)React环境搭建的过程

npm install -g create-react-app yarn
//create-react-app是一个脚手架
create-react-app antd-demo（antd-demo为项目名称）
//Ant Design 一个组件库，里面有很多类似于输入框，按钮等。
cd antd-demo
yarn start（npm start）

安装地址示例

（2）React 基础

（2.1） es6语法

（2.2） JSX

JSX语法允许HTML代码和JS代码混着写。在JSX中是利用小驼峰的方式来命名属性的名称，例如class变成了className。在JSX中可以任意的使用js的表达式，但是需要用{}括起来类似于 ：

const element = <div className='haah'>hello React </div>
const element = <img src={user.avatarUrl}></img>;
const element =  <div className="hahah">}{right?yes:no}</div>

（2.3） 组件

组件其实是将整个页面分为一些独立的可以复用的部分。组件从概念上看就像是函数，它可以接收任意的输入值（称之为“props”），并返回一个需要在页面上展示的React元素。组件分成函数组件和和类组件两种。
函数组件：

//函数组件
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
//类组件
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

（2.4） Props

Props简单的来说就是组件之间传递数据的桥梁。父子组件之间进行的数据传递，pops中的数据通常是无法进行更改。Props的只读性。Props可以将父组件中的数据或者方法传递给子组件。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

（2.5）State

State是组件内部的状态，state的状态会反应到UI的组的变化上。State的初始的状态是根据constructor中的this.state来进行初始化。改变也是通过this.setState的方法进行改变。

总结：react组件中的数据来源是props和state 。props是相当于对外的接口，通过props来接受外部传入的数据或者方法，而state则是对内的接口，组件的变化通过state的状态进行改变。

（3）react 的生命周期

React的生命周期可以分为三个过程：装载过程、更新过程、以及卸载过程。

（3.1）装载过程

A: constructor

定义 ：并不是每个组件都需要定义自己的构造函数，无状态的React组件往往就不需要定义构造函数，
执行时间：是组件在加载前最先调用的，并且只需要调用一次。
作用：继承父组件的props，super（props）。
初始化state，this.state ={变量名：值}
绑定成员函数的this环境，this.函数名称 = this.函数名称.bind(this)。这样做的目的是在于，在render中调用时，可直接使用this.函数名称。

B．componentWillMount

组件将要挂载，在render之前执行，但仅执行一次。即使多次重复渲染该组件，或者改变了组件的state。

C. render

Render是react必不可少的核心组件，不能在该函数中修改状态机的state。执行时间在componentWillMount之后，在componentDidMount之前。
作用：渲染挂载组件。
触发的条件：(1)初始化加载页面，(2)状态机改变setState (3)接收到新的props。
Render并没有做实际的渲染的动作。

D.componentDidMount

组件已经挂载，在render之后执行，只执行一次。

(3.2)更新过程（Updating）

一旦组件被挂载之后，当props和state被修改的时候。就会引发组件的更新的过程。

A、componentWillReceiveProps(nextProps)

该方法只有在props引起的组件的更新的过程中才会被调用。State引起的组件的更新不会引起该方法的执行。其中nextProps是父组件传递给当前组件的新的props，

B、shouldComponentUpdate(nextProps,nextState)

除了Render函数，shouldComponentUpdate可能是 React生命周期中最重要的一个函数了。Render函数决定了渲染什么，而shouldComponentUpdate函数是决定了什么时候不需要渲染。

C、 componentWillUpdate和componentDidUpdate

如果组件的shouldComponentUpdate函数返回true，React接下来就会依次调用对应组件的componentWillUpdate、render和componentDidUpdate函数。
componentWillMount和componentDidMount，componentWillUpdate和componentDidUpdate，这两对函数一前一后地把render函数夹在中间。
和装载过程不同的是，当在服务器端使用React渲染时，这一对函数中的Did函数，也就是componentDidUpdate函数，并不是只在浏览器端才执行的，无论更新过程发生在服务器端还是浏览器端，该函数都会被调用

(3.3)卸载过程（Unmounting）

React组件的卸载过程只涉及一个函数componentWillUnmount，当React组件要从DOM树上删除掉之前，对应的componentWillUnmount函数会被调用，所以这个函数适合做一些清理性的工作。