手把手教你学react-hooks初学者-useState-useEffect-useContext

1. 搭建react环境，首先安装creat-react-app 脚手架。 用npm run eject 命令，把webpack 的配置文件显示出来。
2. 用creat-react-app 项目名。创建一个react项目.
3. npm i 初始化项目
4. npm start启动项目
5. gitdemo https://github.com/imlimiao/react-Hooks-study

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）

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // 仅在 count 更改时更新

1. javascript – 如何使用React useEffect仅调用一次加载函数
   只在初始化的时候加载一次。

 componentDidMount() { loadDataOnlyOnce(); }

1. 如果你只想在初始渲染后运行给予useEffect的函数,你可以给它一个空数组作为第二个参数.

 useEffect(() => { loadDataOnlyOnce(); }, []);

• useContext 具体的demo 详细请见(compontes-hooks-context )

  • 考虑这样一种场景，如果组件树结构如下，现在想从根节点传递一个 userName 的属性到叶子节点 A D F，通过 props 的方式传递，会不可避免的传递通过 B C E，即使这些组件也没有使用这个 userName 属性。
    

import React, { useState, useContext } from 'react';
import ReactDOM from 'react-dom';
const myContext = React.createContext();
// ⼦子组件
function Com() {
const { count, setCount } = useContext(myContext);
return (
<div>
⼦子组件： {count}
<br />
<button onClick={() => setCount(count + 1)}>count + 1</button>
</div>
)
}
// ⽗父组件
function App() {
const [ count, setCount ] = useState(0);
return (
<myContext.Provider value={{ count, setCount }}>
⽗父组件： {count}
<br />
<Com />
</myContext.Provider>
)
}
ReactDOM.render(<App />, root);

• 掘金上这篇文章也很好 值得推荐https://juejin.im/post/6844904153584500749

react 项目的优化