react-hook超实用的用法和技巧分析

jiezi

5 年前

react hook 发布也已经有几个月了，相信有部分人已经开始使用了，还有些人在犹豫要不要用，可能更多人安于现状，没有要用的打算，甚至还有很多公司的 react 版本是 15 或以下的，迫于升级的难度没有使用。以我个人的观点，要不要使用 react hook 呢？

建议用的的人

项目 react 版本已经是 react16 了
新建的项目
一直对新技术保持关注，跃跃欲试的人
对函数式编程爱好的人
对 react 的 componentDidMount，componentWillReceiverProps，componentDidUpdate 厌烦，甚至因为重新渲染整天在头疼的人

不建议用的人

对 react hook 极其厌恶，对 react 生命周期编程是非爱好的人。
只要你想，没有不建议用的人，包括第一类人。

这只是我个人的建议，我现在用的周期也不长，我们的项目是 react 16 的，并且团队里只有我自己在写 ract hook。幸好 react hook 和生命周期编程方式是完全兼容的。

那么其实 react hook 的特点和优点其实也显露出来了。

1. 没有了显性的生命周期，所有渲染后的执行方法都在 useEffect 里面统一管理
2. 函数式编程，你不需要定义 constructor，render，定义 class
3. 某一个组件，方法需不需要渲染，重新执行完全取决于你，而且十分方便管理
4. 肯定还有我没发掘的优点

针对以上的特点优点我逐一说明，对于特别基础的用法我就不大篇长论了，建议参考官网的说明文档：
react 官网

上代码(伪)：

function getData(id) {const [data, setData] = useState({});
    useEffect(() => {const data = api.getData(id);
        setData(data);
    }, [id]);
    return <div>{data.name}</div>
}

这是根据 id 获取数据显示 name 的组件。
因为这个 id 是外部传入的，在以前你需要再 didMount，willReceiverProps 里面去判断是否传入的和当前的不一样，然后去获取数据，但是这里就不用了。直接集成在 useEffect 里面。最关键的是第二个参数[id]。这个参数的意思是 id 变了才进入里面的方法执行，方然第一次必执行。当然我说的不全面，大致是这个意思，还有更复杂的场景，反正这种方式类似于监听 id，id 变了就执行，这不就是我们的最终目的吗？react 以前分那么多周期其实就是处理这一件事情

这个就不用多说了吧

function heihei() {const [count, setCount] = useState(0);
    return (
        <div>
            {count}
            <button onClick={() => setCount(count + 1)}> 增加 count</button>
        </div>
    )
}

no 生命周期，no class，一切都是函数式编程

这里主要讲两个方法，useMemo 和 useCallback
先看 useCallback
之前如果我们在 render 中定义了一个方法：

render() {const {data} = this.state;
    const filter = data.filter(e => e.id !== 5);
    ...
}

那么我们知道每次 render 都会执行 filter 这个方法，其实你是不是觉得当 data 没变这个方法只要执行一次就好了，看看 react hook 怎么做的

function demo() {
    ...
    const filter = useCallback(() => {data.filter(e => e.id !== 5)
    }, [data])
    ...
}

看懂了吗？这个完全就是我之前提出来的思路啊，它把这个方法执行的结果缓存起来了！！！后面的 [data] 就是当 data 不变，也不会多执行。
同样的道理，对于一个组件，用 useMemo 就好啦

const mainInfoMemo = useMemo(() => {
    return MAIN_INFO.map(e => (<div key={e.key}><b>{e.label}</b>：{curSubject[e.key]}
        </div>
    ));
}, [curSubject]);

当 curSubject 不变，当你用这个组件的时候一直不会再次渲染。

纸上得来终觉浅，绝知此事要躬行
用了才能发掘更多东西，理解下前端的发展方向，改变以前 react 的编程习惯
记得收藏哦 ^^