Hooks 面试、开发都用得到

hooks

　　为什么使用hooks？(那就夸夸它)

　　1、多个状态不会产生嵌套，写法还是平铺的

　　2、更容易将组件的UI与状态分离

　　3、hook直接用在function当中，不是class,另外每个hook都是相对独立的不同组件，调用同一个hook也能保证各自状态的独立性

　　函数组件的主体只应该返回组件的html结构代码，其他的操作（副效应）都必须通过钩子引入

API

　　1、useState

　　　　作用：声明状态变量

　　　　与setState的区别：this.setstate做的是合并状态后返回一个新状态，而useState是直接替换老状态后返回一个新状态

　　　　详见下图：

　　

 

 　　　　特：useState调用声明的函数时会重新渲染

　　　　react是根据useState出现的顺序来定的，所以react规定我们必须把hooks写在函数的最外层，不能写在if else等条件语句当中，来保证hooks的执行顺序一致

 

　　2、useEffect

　　注意事项⚠️：

 

　　第一：useEffect在组件 mount 和 unmount 以及每次重新渲染的时候都会执行,在使用useState调用声明【改变状态变量的函数】时，也会执行

 

　　第二：useEffect中定义的函数执行不会阻碍浏览器更新视图，因为这些函数是异步的 

　　useEffect中有两个参数，第一个参数是一个函数，第二个参数是一个依赖的数据，其中第二个参数发生变化的时候，此useEffect 就会重新执行一次。

 

　　模拟生命周期

　　时候，我们不希望useEffect()每次渲染都执行，这时可以使用第二个参数，使用一个数组指定副效应函数的依赖项，只有依赖项发生发生变化时，才会渲染

 

　　模拟  componentDidMount  生命周期

　　第二个参数是[]空数组；useEffect只会在组件 componentDidMount时期执行。

　　第二个参数是空数组。表明副效应参数没有任何依赖项，副效应函数只会在组件加载后执行一次

　　效果：通过模拟拿到 mount（挂载） 周期才执行的回调函数

　　useEffect(()=>{

　　　　console.log(’页面挂载才应该执行的模拟生命周期‘)

　　},[])

 

　　第二个参数是个数组，数组里面的值发生变化时，副效应函数才会执行

　　useEffect(()=>{

　　　　console.log(‘change改变，就会执行’)

　　},[change])

 

　　模拟 componentWillUnMount 生命周期

　　第一个参数（函数）return 一个函数，模拟 componentWillUnMount

　　componentWillUnmount 等价于 useEffect 的回调函数返回值（仅执行一次时），因此直接把回调函数返回值抛出来即可

 

　　useEffect(()=>{

　　　　return fn

　　},[])

　　或者

　　useEffect(()=> fn , [] )  //箭头函数方式直接return出函数

 

　　模拟 componentDidUpdate 生命周期

　　第二个参数是不写；effect只会在组件 componentDidMount和componentDidUpdate时期执行。

　　useEffect(() => {

  　　 if (mounting.current) {

    　　 mounting.current = false;

  　　 } else {

    　　 fn();

  　　 }

　　})

 

　　使用useEffect()时，有一点需要注意，如果有多个副效应，应该调用多个useEffect(),而不应该合并写在一起