函数式组件2

101 阅读4分钟

HOC就是高阶组件。

  • hooks在class内部是不起作用的,但你可以使用他们来取代class。

Hook是什么?

Hook是一个特殊的函数,它可以让你“钩入"React的特性。例如,useState是允许你在React函数组件中添加state的Hook。

什么时候我会用Hook?

  • 如果你在编写函数组件并意识到需要向其添加一些state,以前的做法是必须将其它转化为class。现在你可以在现有的函数组件中使用Hook。
  • Hooks的原理其实很简单,涉及到状态的hook都需要定义两个参数。
  • 即状态本身和修改状态的方法,在组件节点中、他们都是以数组的结构存储,每次的修改实际上向结构中添加内容并且修改指针的指向。

Hook规则

Hook本质就是JavaScript函数,但是在使用它时需要遵循两条规则。

  1. 只在最顶层使用Hook 不要在循环,条件或嵌套函数中调用Hook,确保总是在你的React函数的最顶层调用他们。遵守这条规则,你就能确保Hook在每一次渲染中都按照同样的顺序被调用。这让React能够在多次的useState和useEffect调用之间保持hook状态的正确。
  2. 只在React函数中调用Hook,不要在普通的JavaScript函数中调用Hook。

useState返回数值是个数组,第一个值就是默认状态,第二个参数是修改状态的方法。 函数式里的state中的变量会被react保留。 如果状态里的初始值是 引用类型,要在外面先得到它,去修改,修改完之后,再调用setCount方法。 例如:

function App(){
    let [count,setCount]=useState(0);//0是状态初始值。
    
    return <div>
        <button onClick={()=>setCount(count+1)}>按钮</button>
    </div>
}

调用useState方法的时候做了什么?

它定义一个state变量。我们的变量叫count,但是我们可以叫他任何名字,比如bananna。这是一种在函数调用时保存变量的方式——useState是一种新方法,它与class里面的this.state提供的功能完全相同。一般来说,在函数退出后变量就会“消失”,而state中的变量会被React保留。

useState需要哪些参数?

useState()方法里面唯一的参数就是初始state,不同于class的是,我们看可以按照需要使用数字或字符串对其进行赋值,而不一定是对象。在示例中,只需要使用数字来记录用户点击次数,所以我们穿了0作为变量的初始state。(如果我们想要在state中存储两个不同的变量,只要调用useState()两次即可)。

useState方法的返回值是什么?

返回值为:当前state以及更新state的函数。这就是我们写const [count,setCount]=useCount()的原因,这与class里面this.state.countthis.setState类似,唯一区别就是你需要成对的获取它们。我们采用的是数组结构方式获取的。

useMemo 他会把函数里运算的值缓存下来,而不是函数本身,监听的数组元素值改变时,才会重新计算这个值;如果数组元素没变,得到的永远是上一次的计算结果,如果数组元素变了,那么该hook里面的函数会重新调用,生成新的值。

useRef(null)

null是current的默认值,null也可以省略,但尽量都传,因为他用在了return之前,现在还没有虚拟dom,而dom又是个对象,所以只能传null。 useRef返回一个可变的ref对象,其current属性被初始化为传入的参数。 特点: 返回的red对象再组件的整个生命周期内保持不变。 修改ref.current不会引发组件重新渲染。

利用这些特征我们除了再可以将dom存储在current中以外还可以将那些不涉及到组件更新以及在函数调用过程中不应该被重复初始化的数据存储在其中,就像类式组件在实例对象上存储的数据一样

useMemo接收一个函数