手把手教你学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
 }) ;

三、调用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