react hook学习总结

1.使用useState来代替react中的this.state和this.setState

const [count, setCount] = useState(0);

把0赋值给count变量，可以用{count}调用变量，可以用setCount改变count变量的值

2.useEffect用来等代替原来的生命周期：componentDidMount(第一次渲染后调用)、componentDidUpdate(第二次以后渲染后调用)、componentWillUnmount(组件卸载后调用)

useEffect( ()=>{ return ()=>{ } } , [ ])

在return上面执行的就是渲染后调用的，return中执行的就是组件卸载后调用的，当包含return时，说明这是个需要清除的Effect，在除了第一次外，后面的每一次都是先执行return中的代码先销毁上一个Effect在执行return上面的代码执行当前的Effect，可以通过设置第二个参数，中括号中放变量，只有在该变量变化时，才会执行useEffect，如果不放参数，那就只会在第一次渲染后调用，更新不触发

3.useMemo其实和useEffect有些相似，useMemo是当第二个参数变化时，调用第一个参数的函数，不过这个函数是一个外部函数，而且可以将函数的返回值赋回给变量

const changedname = useMemo(() => namechange(), [ name ]);

4.useRef就是先在组件内创建一个ref

const refvalue = useRef(null);

然后在JSX中指定某一个控件

<input ref={refvalue} />

最后就可以在组件内任意地方通过refvalue.current获取该控件的节点，当然，也可以用props将ref传给子组件获取

5.useContext就是先在全局中创建一个context

const ContextName = createContext();

然后通过Provider向子组件传递value值，如：

1.  
   <ContextName.Provider value={{ name: name, age: 18 }}>
2.  
   ...
3.  
   </ContextName.Provider>

子组件再使用useContext取出context的value值

1.  
   let childname = useContext(ContextName);
2.  
   {childname.name}
3.  
   {childname.age}

6.自定义Hook是一个非常重要的点，它可以提取各个组件的共享逻辑，编写逻辑功能代码，避免了相同功能的组件要写一大堆相同的代码

基本结构：const [参数1,参数2,参数n...] = useXXX(参数n...)

其中返回值的参数可以是自定义Hook中state里面的值(变量参数)，也可以是函数(函数参数，如setState)，那么当组件使用这个自定义Hook时，可以通过调用函数参数去改变变量参数的值，如果这个变量参数嵌入JSX中，当它发生变化时，该组件就会重新渲染值得注意的是，就算同一个自定义Hook被多个组件引用，它里面的state也是独立的

7.在闭包中不能依赖外部的state中的变量，可以在回调时命名变量为其他名称

8.hook是与function结合的，不会与class组件连用，所以不会出现this，不需要担心this是哪个对象的问题