初始React ｜青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 7 天，，前言今天青训营的课程是关于

这是我参与「第五届青训营」伴学笔记创作活动的第 7 天

前言

今天青训营的课程是关于React的，于是借着这次课程机会再次对React基础知识进行回顾。

1.React Hook/Hooks是什么？

( 1 ) Hook是React 16.8.0版本增加的新特性/新语法

( 2 )能够使我们在函数式组件中使用 state 以及其他的 React 特性

2.三个常用的Hook

（1）State Hook：React.useState( )

React.useState(num)返回的是一个数组[count,setCount],count是被赋初始值num，setCount是用于更新count的方法,例子如下

function Demo(){
    const [count,setCount] = React.useState(0);

    function add(){
        setCount(count+1);
    }

    return (
        <div>
            <h1>当前求和为: {count}</h1>
            <button onCLick={add}>点我加1</button>
        </div>
    )
}

export default Demo

（2）Effect Hook：React.useEffect( )

（3）Ref Hook：React.useRef( )

3.State Hook

（1）State Hook让函数式组件也可以有state状态，并进行状态数据的读写操作

（2）语法 const [xxx,setXxx] = React.useState(initValue)

（3）useState( )说明：

参数：第一次初始化指定的值在内部做缓存

返回值：包含2个元素的数组，第一个为内部当前状态值，第2个是更新状态值的函数

（4）setXxx2种写法

setXxx(newValue):参数为非函数值，直接指定新的状态值

setXxx(value => newValue)：参数为函数，接受原本的状态值，返回新的状态值，内部用其覆盖原来的状态值

function Demo() {
    const [count, setCount] = React.useState(0);
    const [name, setName] = React.useState(0);

    function add() {
        setCount(count => count + 1);
    }

    function changeName() {
        setName('xiaoming');
    }

    return (
        <div>
            <h1>当前求和为: {count}</h1>
            <h1>当前姓名为: {name}</h1>
            <button onCLick={add}>点我加1</button>
            <button onCLick={changeName}>点我改变姓名</button>
        </div>
    )
}

export default Demo

4.Effect Hook

（1）Effect Hook可以使我们在函数式组件中执行副作用操作（类似于类式组件的生命周期钩子）

（2）React中副作用的操作：

1.发ajax请求

2.设置订阅 / 启动定时器

3.手动更改真实DOM（卸载组件）

（3）语法和说明：

useEffect(()=>{
    //在此可以执行任何带副作用的操作
    return ()=>{  //在组件卸载前执行
        //在此做一些收尾工作，例如清除定时器，取消订阅
     }
 }，[stateValue]) /*1.如果指定的是[],回调函数只会在第一次render()后执行
                    2.如果没有指定(就是空),回调函数会在第一次render()后
                      和每个状态改变改变后执行
                    3.如果[a],那么会在第一次render()后和a状态每次改变时调用

（4）可以把 useEffect Hook 看做以下三个函数的组合

componentDidMount( ) //组件挂载时

componentDidUpgrade( ) //组件更新时

componentWillUnmount( ) //组件即将卸载时

5.Ref Hook

（1）可以在函数组建中存储 / 查找组件内的标签或任意其他数据

（2）语法 const refContainer=React.useRef( )

（3）作用：保存标签对象，功能与React.createRef( )一样

写在结尾

这篇笔记重点对一些React hook进行了记录，今天的课程内容还是让我受益很多的，对React又进行了一次认识，加深印象，希望在后边学习中对React越来越了解！

初始React ｜ 青训营笔记

前言