精读《React Hooks》

[ascoders]

本周精读的文章是：making-sense-of-react-hooks，国内也有比较好的分析文章，比如 对React Hooks的一些思考。

[totoSalad]

function App() {
  const ref = React.useRef(null);
  let chart: G2.Chart = null;

  React.useEffect(() => {
    if (!chart) {
      chart = new G2.Chart({
        container: ReactDOM.findDOMNode(ref.current) as HTMLDivElement,
        width: 500,
        height: 500
      });
    }

    // do something
    chart.render();

    return () => chart.destroy();
  });

  return <div ref={ref} />;
}

这个 chart 是不是每次渲染都会新建一次？

[ascoders]

@totoSalad 不会，判断了 chart 实例是否存在。

[totoSalad]

在我的理解里 function component 没有实例，每次组件更新时 chart 都是 null，需要新建。有在线demo吗？

[zeromake]

@totoSalad 你可以挂到ref上面每次的ref都会是同一个实例。

[crimx]

@ascoders 应该会吧？ useEffect 的回调在 App 中创建，每次都是新的，所以闭包也都是新的。chart 应该是每次渲染都会反复被清理新建。文档是建议用空数组依赖来实现 on mount 副作用。

[ascoders]

@crimx 感谢建议！空数组是最好的，我例子中的方式很容易被其它组件的更新刷新掉。文中我修改一下。

[totoSalad]

场景如果是整个生命周期只渲染一次，@crimx 的方案没有问题~

[kltk]

场景如果是整个生命周期只渲染一次，@crimx 的方案没有问题~

只渲染一次的话，if (!chart) 是多余的，另外大多数情况不能保证没有 rerender，还需要其它处理

[oldashes]

useFriendStatusBoolean 与 useFriendStatusString 是有状态的组件（使用 useState）这句不对吧？
useFriendStatusString没有使用useState，应该不是有状态的组件啊 @ascoders

[kltk]

useFriendStatusBoolean 与 useFriendStatusString 是有状态的组件（使用 useState）这句不对吧？
useFriendStatusString没有使用useState，应该不是有状态的组件啊 @ascoders

useFriendStatusString 调用了 useFriendStatusBoolean

[Tan90Qian]

如果要真正实现一个 Redux 功能，也就是全局维持一个状态，任何组件 useReducer 都会访问到同一份数据，可以和 useContext 一起使用。

大体思路是利用 useContext 共享一份数据，作为 Custom Hooks 的数据源。具体实现可以参考 redux-react-hook。

enzymejs/enzyme#2176 (comment)
@ascoders 哪怕是社区中顶尖的第三方测试库enzyme，至今也无法针对useContext实现对应的测试api，而距离这个内置hook的首次登场已经有差不多半年了。我觉得ReactHooks的出发点是好的，实现的功能总体上也是非常强大的，但对于useContext等部分影响单元测试的内置hook，可用性还有待商榷

[ascoders]

@Tan90Qian 包括 hooks 的 devTools 也才支持，生态上确实需要等待完善。

[AricZhu]

`{(count, setCount) => };

function App(props) {
return {props.count};
}`
这里面的 Count 组件的 {} 中为什么是一个函数呢，需要运行这个函数吗？这里没太看懂

[sfshine]

@totoSalad 不会，判断了 chart 实例是否存在。

这个判断chart就是一种状态吧，不应该写在UI组件中吧？