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('页面卸载的事件')
}
},[])