puxiao / react-hook-tutorial Goto Github PK

最近也在学习React Hook，正好搜到了本教程，便简单拜读一遍，收获颇丰。不过教程中还有几个小问题可能需要讨论或者更正：

01 React Hook 简介

子组件为了达到修改父组件中的数据状态，通常采用“高阶组件(HOC)”或“父组件暴露修改函数给子组件(render props)”这2种方式。 这2种方式都会让组件变得复杂且降低可复用性。

高阶组件和render props是为了解决代码复用的问题。
实际子组件要修改父组件的数据状态，应该是通过父组件暴露一个回调函数，子组件通过该回调函数传递数据来修改吧？

复杂场景下，比如数据获取(dade fetching)和事件订阅(event listeners)，相关代码难以组织在一起。

dade fetching应为data fetching。

03 useState高级用法

通过React官方文档可以知道，当使用 setXxx 赋值时，Hook会使用Object.is()来对比当前值和新值，结果为true则不渲染，结果为flash就会重新渲染。

flash应为false。

06 useContext基础用法

请注意传值必须使用value={obj}这种形式；

Context传值时，value后面不一定必须是对象，也可以是字符串等原始类型值。

在类组件中除了<XxxContext.Consumer>标签，还有另外一种获取共享数据方式：static xxx = XxxContext; 但是这种形式在函数组件中无法使用。

在类组件中，一般是指定类组件的静态属性contentType，这样在类中可以直接用this.context消费该Context的值，而不是任意一个静态属性。

08 useReducer基础用法

EventEimtter

是否是“EventEmitter”？

楼主好文，何不搞个博客呢？

个人猜测 不知道是否是这样

<button onClick={() => {setObj({...obj,a:obj.a+1})}}>a+1</button> 
<button onClick={() => {setObj({...obj,b:obj.b+1})}}>a+1</button>
// 应该为
<button onClick={() => {setObj({...obj,b:obj.b+1})}}>b+1</button>

博主文章写得挺好，先赞一个，不过我这边有个问题咨询一下，有空可以看看
文章地址：https://github.com/puxiao/react-hook-tutorial/blob/master/01%20React%20Hook%20%E7%AE%80%E4%BB%8B.md
问题描述：文章里面提到了hook的缺点“缺点二：组件数据状态逻辑不能重用、组件之间传值过程复杂”，然后后面又讲了“类组件缺点二：组件之间传值过程复杂、缺点三：复杂场景下代码难以组织在一起Hooks解决方式：通过React内置的useState()函数，可以将不同数据分别从"this.state"中独立拆分出去。降低数据复杂度和可维护性，同时解决类组件缺点三中“内部state数据只能是整体，无法被拆分更细”的问题。”

我的问题是，没有看出来hooks是怎么解决“组件之间传值过程复杂”的问题？

博主，10.useCallback那篇我有个疑问。
文章末尾那个案例，提到：只要依赖变量不发生变化，那么重新渲染时就可以一直使用之前创建的那个函数，达到阻止本次渲染。我的理解是clickHandler01 和clickHandler02着两个函数不用重新渲染，但是跟按钮没关系。
因为不是还有这个规则吗：默认情况下如果父组件重新渲染，那么该父组件下的所有子组件都会随着父级的重新渲染而重新渲染。
所以我的疑问是为啥点击一个按钮不会让另外一个按钮重新渲染

12章 useRef的基础用法
useRef 使用示例3 子组件中

import { useEffect, useState } from "react";

const ChildComponent = ({ funRef }) => {
  const [num, setNum] = useState(0);
  useEffect(() => {
    const doSomething = () => {
      setNum(Math.floor(Math.random() * 100));
    };
    funRef.current = { doSomething }; //在子组件中修改父组件中定义的childFunRef的值
  }, [funRef]);
  return <div>{num}</div>;
};

export default ChildComponent;

1.将funRef.current = { doSomething }写在useEffect中，而useEffect后面依赖了变量funRef，这样不会造循环执行吗？
2.doSomething放在useEffect而不是放在子组件中直接创建，每次组件刷新都会从新生成一份doSomething(),这个不太理解

这里应该是深拷贝吧