React16.8的新增特性，Hook讲解

Posted 2020-12-09 passerma

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

1.useState

用来声明state变量，类似于class里的this.state，使用方法如下

export default function Example() {
    // useState() 方法里面唯一的参数就是初始 state，可以是数字或字符串或对象
    // 这一步设置了count的初始值为0
    // setCount为修改count这个状态的方法
    // 调用一次setCount，React会重新渲染 Example 组件
    const [count, setCount] = useState(0)

    return (
        <div>
            you count: {count}
            {/* 每次点击按钮调用setCount，会让count + 1 */}
            <button onClick={() => setCount(count + 1)}>Add</button>
        </div>
    )
}

自定义useState

某些时候我们需要自定义 Hook，这可以将组件逻辑提取到可重用的函数中

// 自定义的Hook需要以大写字母开头
// 这里的Hook只控制count + 1，因此可以复用
// 我们只需多次使用，就如下面的count1和count2，他们是互相独立的
function UseState(initvalValue) {
    const [count, setCount] = useState(initvalValue)
    return [
        count,
        () => {
            setCount(count + 1)
        }
    ]
}

export default function Example() {
    const [count1, addCount1] = UseState(0)
    const [count2, addCount2] = UseState(0)

    return (
        <div>
            you count1: {count1}
            {/* 每次点击按钮调用setCount，会让count + 1 */}
            <button onClick={addCount1}>Add1</button>
            you count2: {count2}
            {/* 每次点击按钮调用setCount，会让count + 1 */}
            <button onClick={addCount2}>Add2</button>
        </div>
    )
}

 

2.useEffect

Effect Hook 可以让你在函数组件中执行副作用操作，类似于componentDidMount 和 componentDidUpdate

export default () => {
    const [count, setCount] = useState(0);

    // 在渲染后将执行该操作，并且在执行DOM更新之后也会调用它
    // effect可以返回一个清除函数，如此可以清除上一步的操作
    // 可以接受两个参数，第一个就是操作本身，第二个是更新的依赖
    // 可以选择不传，不传将依赖所有state变化
    // 如果传入空，或者传一个确定的数如[1],那么该函数只会执行一次，即第一次渲染
    // 可以传[count],则表示资源count变化才会调用
    useEffect(() => {
        document.title = `You clicked ${count} times`;
    }, [count]);

    // 当然可以定义多个effect函数，它们会各自执行
    const [person, setPerson] = useState(1);

    useEffect(() => {
        //
    }, [person]);

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
        </button>
        </div>
    );
}

自定义useEffect

某些时候我们需要自定义 Hook，这可以将组件逻辑提取到可重用的函数中 

// 这里实现一个count自动 +1 的函数
// 自定义的Hook需要以大写字母开头
// 可以不传useEffect的第二个参数,这和传入callback, time一样
// 如果第二个传入为空将会出现神奇的事情：
// 会发现console会一直打印0，但是count却一直都是1
// 这是因为未传依赖导致每次更新都在运行第一个延时函数，如果需要变化count可以有两种方法
// 第一种是，传第二个参数为[callback, time]或者不传第二个参数
// 第二种是，将Example里的setCount(count + 1)改为setCount(count => count + 1)
// 这种方法将会改变作用域，每次都会取最新的count，大多数情况下都推荐以函数的形式
function UserInterval(callback, time) {
    useEffect(() => {
        const i = setInterval(callback, time)
        return () => {
            clearInterval(i)
        }
    }, [callback, time])
}

export default function Example() {
    const [count, setCount] = useState(0)
    // 第一种：传第二个参数为[callback, time]或者不传第二个参数
    UserInterval(() => {
        console.log(count)
        setCount(count => count + 1)
    }, 1000)
    // 第二种：将Example里的setCount(count + 1)改为setCount(count => count + 1)
    // UserInterval(() => {
    //     console.log(count)
    //     setCount(count => count + 1)
    // }, 1000)
    return (
        <div>
            you count: {count}
        </div>
    )
}

还有其他的几个Hook讲解，包含 useContext，useReducer，useRef，useCallback，useMemo，useImperativeHandle，useLayoutEffect ，useDebugValue

请前往  https://www.passerma.com/article/62  查看