手把手教你学react-初学者

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 做为第二个参数：~~~~

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

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

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

5. React-Hooks

React Hooks 使 规则
为 保证 Hooks 在使 时 会出现 可预测的问题，官 制定 定要遵循的两条使 规则( 建议)，在此提前声
明.

1. 只在函数组件内部最顶层调 Hook， 要在循环、条件判断或者嵌套函数中调 ;

2. 只能在函数组件中调 Hook( 定义 Hook 中可以调 Hook)， 要在其他 JavaScript 函数中调 。**

   • 基础Hooks API

     • useState （ state 状态管理，比较好理解）

     • useEffect （ 副作用函数，钩子函数，componentWillUpdate,componentDidUpdate.）

       • 当 React 渲染组件时，会保存已使用的 effect，并在更新完 DOM 后执行它。这个过程在每次渲染时都会发生，包括首次渲染。
       • 有些副作用可能需要清除，所以需要返回一个函数（类似componentWillUnmount）

     • useContext