React学习: 03 Hook的理解和简单实例

为什么要用Hook?

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

react的官方加入Hook主要是推荐大家使用函数式的组件,但官方表明并不会抛弃class组件,就我个人来说,我更喜欢class的组件.

Hook其实就是方便操作使用state,还有就是组件挂载和卸载是可以进行一些操作.

函数组件:

function BtnTestFun(){
    const [title,setTitle] = useState("这是一个函数组件通过useState()设置的默认值")
    return(
        <Button variant="outlined">{title}</Button>
    )
}

等价的class组件:

class BtnTestCls extends React.Component {

    constructor(props){
        super(props)
        this.state = {
            title : "class组件通过this.state来传递数据"
        }
    }
    render(){
        return (
            <Button variant="contained">{this.state.title}</Button>
        )}
}

渲染效果:

函数组件相对来说更短小精干,也更直观些.

Effect Hook

Effect Hook 可以让你在函数组件中执行副作用操作,如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

代码:

function BtnTestEffcet(){
    const[count,setCount] = useState(0)
    useEffect(() => {
        console.log("Effect Hook 就是指useEffect()这个特殊函数，它让函数组件能在渲染完成后执行自定义操作")
    } ,[])
    return(
        <div>
            <p>当前点击了{count}次</p>
            <Button onClick={() => setCount(count+100)} variant="outlined">请点击!</Button>
        </div>
        
    )
}

渲染:

const[count,setCount] = useState(0)

上边的函数定义了一个变量和一个可以更新count变量的函数,而Effect是它能在函数组件中执行副作用，并且它与 class 中的生命周期函数极为类似。

以上demos代码仓库地址:
gihub:demos代码仓库