React Hooks

[chinawzc]

R H

1.1 React Hooks

React Hooks 就是用函数的形式代替原来的继承类的形式，并且使用预函数的形式管理state，有Hooks可以不再使用类的形式定义组件了。---现在所有的组件都可以用函数来声明了。

react 官方文档：https://reactjs.org/docs/hooks-intro.html

react 中文文档： https://reactjs.bootcss.com/docs/hooks-intro.html

主要通过demo来讲

有可能翻车。。。

useState、useEffect、useContext、useReducer...

(useState, useEffect, useContext, useReducer, useMemo, useRef, useImperativeHandle, useDebugValue, useLayoutEffect, useCallback )

1.2 对比

Before:

import React, { Component } from 'react';
export default class Example extends Component {
    state = {
      count:0
    }
    addCount = () => {
        this.setState({
          count:this.state.count + 1
        })
    }
    render() { 
        return (
            <div>
                <p> You clicked {this.state.count} times </p>
                <button onClick={this.addCount}> Chlick me </button>
            </div>
        );
    }
}

After:

import React, { useState } from 'react';
export default () => {
    const [ count , setCount ] = useState(0);
    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={()=>{setCount(count+1)}}>click me</button>
        </div>
    )
}

1.3 demo

2.1 useState

​ （1.2中的对比示例）

• useState 作用是用来声明状态变量。

  const [state, setState] = useState(initialState);
  

  声明:

const [ count , setCount ] = useState(0);

useState 这个函数接收的参数是状态的初始值(initialState)，它返回的是一个数组，一个 state，一个更新 state 的函数。

所以上面的代码的意思就是声明了一个状态变量为count，并把它的初始值设为0，同时提供了一个可以改变 count 的状态值的方法函数setCount。

​ 改变 count 的值:

<button onClick={()=>{setCount(count+1)}}>click me</button>

直接调用setCount函数，这个函数接收的参数是修改过的新状态值。接下来 React 会重新渲染组件。

看demo

2.2 useEffect

• 代替常用生命周期函数

可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个生命周期函数的组合。之前在生命周期里经常处理的比如 ajax请求数据，添加监听，手动修改DOM等等，可以放到useEffect处理。

useEffect(() => { 
		effect
    return () => {
        cleanup
    }
}, [input])

看demo

React首次渲染和之后的每次渲染都会调用 useEffect 函数，而之前要用两个生命周期函数分别表示首次渲染(componentDidMonut)和更新导致的重新渲染(componentDidUpdate)。

componentWillUnmount?

实现 componentWillUnmount生命周期函数：需要用到 useEffect 的一个可选的清除机制-返回一个函数，将添加和清除的逻辑放在一起。

看demo

1.每次状态发生变化，useEffect 都进行清除

2.useEffect的第二个参数[]，它是一个数组，数组中可存入很多状态对应的变量，当状态值发生变化时，才进行清除。但是参数为空数组[]时，就是只有当组件将被销毁时才进行清除。另外默认情况下，effect 将在每轮渲染结束后执行，但你可以选择让[input]中的某个/某些state变化时它才执行。

这时用useState和useEffect 已经可以实现大部分的业务逻辑, 就可以愉快的编写组件了...

2.3 useContext

(get context anywhere)

在用类声明组件时，父子组件的传值是通过组件属性和 props 进行的。

react中，context 可以帮助我们跨越组件层级直接传递变量，实现共享； 现在react的hooks也提供了 useContext 这个方便的Hook。 useContext 有一个参数： context 对象本身。

const value = useContext(MyContext);

另外，和 useReducer 配合使用，可以实现类似 Redux 的作用（next）

demo

以上3个被称为是基础hook，其他的称为额外的hook

2.4 useReducer

const [state, dispatch] = useReducer(reducer, initialState, init)

useState 的替代方案。它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法。

Demo

结合useContext

Demo

2.5 end。。。

例子，可以去项目中找...