react hooks源码深入浅出（一）

react hooks在react 16.8版本推出后就广受好评，因为它很好的解决了旧版本react无法优雅的复用状态逻辑的问题，同时官方说明hooks会向后兼容不存在breaking changes，在项目中更好的无缝接入。

背景和意义

• 目前项目中hooks使用越来越普及，我们作为开发者不仅要知其然还要知其所以然
• 让我们在使用过程中能更快的定位排查问题、性能调优
• 学习和了解优秀框架的实现思路

从两个阶段出发分析

• 初次渲染
• 更新阶段

DEMO

我们以最基本的demo开始，其中涉及两个基本的hook：

• useState
• useEffect

import React ,{
   useState,useEffect} from 'react';

const Example = props => {
   
    const [count,setCount] = useState(0);

    useEffect(()=> {
   
        console.log('xiaoliu test');
    },[count])

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