react hooks初体验

什么是Hooks?
Hooks是react即将推出的功能,它允许您在不编写类的情况下使用状态和其他React功能。
我的理解就是可以用写无状态组件的方式去编写拥有状态的组件。
遗憾的是,正式版16.7.0出了之后并没有hooks,如果需要体验还需下载next版本,目前是16.7.0-alpha.2

npm i react@next
这次与大家分享四个Hooks,个人觉得这几个应该是之后工作中会经常使用到的。

 1. useState
 2. useEffect
 3. useReducer
 4. useMemo

1.useState
个人感觉这个钩子是重点,使用它即可做到用函数的编写带有状态的组件。

import React,{ useState,useEffect } from 'react'
const HookTest = () => {
    const [obj,setValue] = useState({key:'count',value:0});
    const handleChange = () => {
        const value = obj.value+1;
        //改变状态
        setValue(Object.assign(obj,{value}));
    }
    return (
        <div>
             {obj.key}:{obj.value}
             <p>
                <button onClick={handleChange}>累加</button>
             </p>
        </div>
    )
}

很明显,重点在于const [obj,setValue] = useState({key:’count’,value:0})这一句,useState是个函数,接收一个状默认值,返回一个数组,第一个元素为状态,初始值为传入函数的默认值,第二个元素为方法,可使用此方法改变状态的值。

2.useEffect
这个钩子,官方所说是componentDidMount,componentDidUpdate和componentWillUnmount这三个生命周期的结合,因为组件挂载完成时会执行,更新时会执行,卸载时会执行,接上面的HookTest组件,往里添加

useEffect(()=>{
    console.log('obj->',obj);
    return ()=>{
        console.log('卸载时..');
    }
});

这就是一个基本用法,挂载、更新、卸载都会打印obj对象,return的函数,作为组件更新或者卸载时执行,比如在使用setinterval,可以在return的函数里写clearinterval。
如果只想让它执行一次的话,可以往函数里添加第二个参数。

useEffect(()=>{
    console.log('obj->',obj);
},false);

这样只在挂载完成时执行一次,第二个参数可以为false、[]、{}、””
如果想让他有条件的执行,可以往第二个参数传入具体的参数

useEffect(()=>{
    console.log('obj->',obj);
},{obj.value});

如果obj.value值变化时,就执行,没变化时就不执行,对于性能优化非常友好。

3.useReducer

如果使用过redux的童鞋们不会默认,将需要的状态保存到一个对象中,可供所有的组件使用。
先上代码

import React, { useReducer,useMemo,useEffect,useState } from 'react';
//创建reducer,reducer可在外部创建然后再引入
function reducer(state = { count: 0 }, action) {
    switch (action.type) {
        case 'reset':
            return { count: 0 };
        case 'increment':
            return { count: state.count + 1 };
        case 'decrement':
            return { count: state.count <= 0 ? 0 : state.count - 1 };
        default:
            return state;
    }
}
//组件
const useReducerDemo = () => {
    const [state, dispatch] = useReducer(reducer, { count: 0 }, { type: 'increment' });
    //异步增加
    const asyncIncrement = () => {
        setTimeout(()=>{
            dispatch({ type: 'increment' })
        },2000);
    }
    return (
        <div>
            <p>
                <span>Count: {state.count}</span>
                <button onClick={() => dispatch({ type: 'reset' })}>还原</button>
                <button onClick={() => dispatch({ type: 'increment' })}>+</button>
                <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
                <button onClick={asyncIncrement}>async+</button>
            </p>
        </div>
    )
}

可以看到,和useState很像,也是使用一个数组解构接受返回的值。
先说返回的值:
1.state
自然为reducer的状态
2.dispatch
这个是一个函数,有dispatch就意味着我们可以不用像使用redux时还需要自己下中间件(如redux-thunk)就可以进行异步操作,具体看asyncIncrement函数,参数为一个对象,指定需要执行的action
再说useReducer函数的参数:
第一个参数为你引入的reducer,第二个参数为state的默认值,第三个参数为初始触发的action,就是载入时默认就执行一个action

4.useMemo
useMemo只有当其中一个输入发生变化时,才会重新计算记忆值。此优化有助于避免在每个渲染上进行昂贵的计算。
此钩子也是有助于性能优化,接入上面的useReducerDemo组件,往里添加

const [tips,setTips] = useState(false);
//当为0时提示不能再减了
useEffect(()=>{
    if(!state.count){
        setTips(true);
    }else{
        setTips(false);
    }
});
const memoizedValue = useMemo(() => {
    console.log('useMemo run');
    return tips
}, [tips]);

在return组件元素div里添加

{
    memoizedValue && <p>不能为负数哦</p>
}

以上新增的代码时为了实现在reducer里的count小于等于0或从0变更为其他数字时更新true或false,以此达到p元素的显示与否,否则一直为上一次计算得到值,我们使用了console.log(‘useMemo run’);记录它更新的次数,当count从0一直+1,只会打印一次’useMemo run’,由此说明,只在0变成1的时候执行了一次,往后memoizedValue的值一直为0变成1时所return的值。
此例子并说明不了什么,不过当有很庞大计算量的时候就能体现出useMemo的作用了。
useMemo同样也是一个函数,接受两个参数,第一个参数为函数,第二个参数为要比对的值,返回一个值。
第二个参数里可以传入多个值,如[a,b,c,…],当传入的这些值有变化时,就会去执行第一个传入的函数,根据业务需求计算后返回最终结果。
同理,第二个参数传入的值没有更新时,不会执行。

结尾
花了一下午的时间体验hook,其他的钩子也使用了个遍,感觉这四个在我看来和在我公司业务里可能会大量的使用到,所以发此文章分享,也为记录,本人新手前端一枚,第一次写文章,有说的不对的地方还请请多多指教。
谢谢大家的阅读。
以上代码的github地址为react-hooks初体验

    原文作者:ZLinhui
    原文地址: https://segmentfault.com/a/1190000017483122
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞