1. 搭建react环境，首先装置creat-react-app 脚手架。
  2. 用creat-react-app 我的项目名。创立一个react我的项目.
  3. npm i 初始化我的项目
  4. npm start启动我的项目

2. 搞清楚react状态治理state

React是一个状态机，体现是什么中央呢，就是体现在state上，通过与用户的交互，实现不同的状态，而后去渲染UI,这样就让用户的数据和界面保持一致了。state是组件的公有属性。

state 只能在本组件中去初始化，并且 state 只能被本组件去批改和仿问，不能被内部仿问和批改，所以也能够说，state 是组件公有的

  1. state 状态初始化。在结构器外面初始化。
constructor(props) {   super(props);   this.state={      key:value,      ...   }}

2.更新state

留神：setState()是异步的，也就是你调用了setState()之后，React就开始筹备去更新了，两头计算会可能会有肯定的延时
 this.setState({     key:value }) ;

3、调用diff算法
setState()会触发diff算法最终确定是否要更新。
每跟新state外面的数据，render 就会从新执行。~~~~

能够让 setState() 接管一个函数而不是一个对象。这个函数用上一个 state 作为第一个参数，将此次更新被利用时的 props 做为第二个参数：~~~~

// Correctthis.setState((state, props) => ({  counter: state.counter + props.increment}));

  1. react 次要是单项数据流，做页面渲染。

    • 染数据渲染中常常会遇到数据更新，在react中并没有相似Vue 的监听(watch，compute)，常常做这类数据的时候须要在钩子函数应用[props]数组相似于应用componentDidUpdate外面实现。
    • 当然当初也有很多包相似watch-props. 倡议还是不要这样写。
    • 这样就将业务逻辑与react生命周期绑定在一起了。不便于管理。Hooks的推出，解决了这样的问题。

5.react-Hooks