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值,如:
<ContextName.Provider value={{ name: name, age: 18 }}>
...
</ContextName.Provider>
子组件再使用useContext取出context的value值
let childname = useContext(ContextName);
{childname.name}
{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是哪个对象的问题