react总结之hooks(useState,useEffect)

hooks是react16.8版本及以上版本可以使用的,它的作用就是使得我们在使用函数创建组件的时候,可以跟使用class创建组件时达到一样的效果!有了这个就不用考虑改用无状态组件还是有状态组件了!具体使用方式如下

import React, { useState, useEffect} from 'react'
import ReactDom from 'react-dom'

// 定义函数式组件
const Title = function () {
// name 赋初始值为'张珊'
    const [name, setMyState] = useState('张珊');
    return (
        <div>
            <h1 name ={name}>{name}</h1>
        </div>
    )
}
// 定义函数式组件
 const  TestHooks = function() {
// myState设置初始值为1
     const [myState, setMyState] = useState(1);
// 这里的useEffect相当于类组件中的componentDidMount()和componentDidUpdate()的集合,也就是说,该函数会在组件挂
// 载完成和组件更新完成之后执行
     useEffect(() => {
         console.log('初始化组件的时候执行,每次点击都执行了');
     })
    return (
        <div>
            <Title></Title>
            <h1>{myState}</h1>
               {
                /**
                 * 通过setMyState修改状态值
                 */
            }
            <button onClick = {() => setMyState(myState +1)}>点击</button>
        </div>
    )
}
 export default TestHooks;