react的hook钩子

本文链接： https://blog.csdn.net/qq_40816649/article/details/100200021

react组件有两种写法一种是export default直接暴露一个function，还有一种是直接定义一个class类然后继承react库的Component类这两种方式来创建react组件。

对于class类创建react组件的方式来说可以直接定义组件的this.state，这样在render中return的jsx模板中就可以直接this.state调用，以及this.setState来更新this.state的参数并更新视图。！！！注意：class类创建的组件不能使用hook。

对于function创建react组件的方式不需要继承react库的Component类，而且不能直接通过this.state设置组件中的数据。这时候就需要用到hook了，hook是针对function创建react组件设置state数据使用的。！！！注意：function创建react组件不能使用this.state。

下面直接看代码吧

import React, { useState,useEffect } from 'react';

export default function Hook() {
  const [count, setCount] = useState(0);
  const [boller, setBoller] = useState(false)
  useEffect(() => {
    console.log('count')
  },[count])
  useEffect(() => {
    console.log('boller')
  },[boller])
  return (
    <div>
      <p> {count} {boller ? 'true' : 'false'} </p>
      <button onClick={() => {setCount(count + 1); setBoller(!boller)}}>
        点击
      </button>
    </div>
  );
}

hook需要用到react库的useState；定义一个hook数组，数组第一个传入的是state数据的名字，数组第二位是方法用来更新这个hook的数据；useState传入的是该hook的默认值。这样一个hook就定义完成了，点击button按钮调用对应更新hook的方法来改变hook和更新视图。

上面还提到了useEffect这个api，这个api主要是在更新这个hook的数据的方法执行后的一个回调方法可以传入两个参数，第一个参数是一个callback回调函数；第二个参数是对应哪写hook更新后才执行不传为所有hook更新都执行，形式为数组。useEffect有点类似vue中的watch监听。

最近的taro项目里面学到了不少之前react中没有注意到的知识点，果然自学的认知还是比较局限的。估计这次taro的项目做完react就能上手项目了。加油！！！

#2019.9.23
如果useEffect中的第二个参数传入空数组则被视为是类似于componentdidmounted这样的生命周期，如果第一个传入的callback参数return一个方法则视为类似于componentdidUnmounted生命周期函数

useEffect(() => {
    console.log('页面首次加载')
    return () => {
      console.log('页面卸载的事件')
    }
  },[])

猜你喜欢