React Hooks简易总结

useState、useEffect、useContext、useReducer、useMemo

useState

设置需要的state与其更新的方法setState，形如：

const [state, setState] = useState(initialState);

initialState为state的初始值

useEffect

每次渲染完成后执行，相当于class组件的componentDidMount / componentDidUpdate

useEffect(didUpdate, excuteArr);

didUpdate是个函数，渲染完成后执行，如果该函数写了返回函数return function (){}，那么返回的函数将在组件卸载前执行

excuteArr形参格式为数组，可不传。若传第二个参数，数组内的值发生改变则触发useEffect；若只传个数组，则只在挂载与卸载组件时调用;

const [name,setName] = useState('xiaoming');
const [age,setAge] = useState(18);

console.log('state name:', name);
useEffect(()=> {
    // name发生改变后触发
}, [name])

思路小插曲

思考：useEffect的第二个参数数组，传的是个原始类型，是怎么做到监听响应？

通过看useEffect的定义，明白数组内的值发生改变将触发useEffect的响应，猜测应该是内部做了新旧值的对比，对于数组来说，只要监听数组内部只要有一项发生改变就执行useEffect的didUpdate

useContext

多组件间传值，父组件设置createContext创建个context对象，context对象里包含个Provider组件，其组件有个value属性，会被订阅；子孙组件通过useContext获取value属性的值；

// 先创建个存context的文件 MyContext.js
const MyContext = createContext();
export default MyContext

// 父组件
import MyContext from './MyContext.js';
const count = useContext(MyContext);
<MyContext.Provider value={count}>
    <Demo1 />
 </MyContext.Provider>
 
 // 子孙组件
 import MyContext from './MyContext.js';
 const count = useContext(MyContext);

cont MyContext = React.createContext(defaultValue);

当组件所处的树没有匹配到Provider (不使用Provider组件) 时，defaultValue参数才会生效。

注意点

1. 函数式组件，命名需要首字母大写的形式；
2. 引入组件时，组件的命名也需要首字母大写；
3. onClick后面接的是函数，不要直接写方法调用；

暂请期待。。。。