精读《怎么用 React Hooks 造轮子》

[ascoders]

许多轮子都可以用 React Hooks 重新造一遍，无论是内部实现，使用方式，都可以改造为全新的 Hook 版本。

也许 React Hooks 可以让你脑洞大开，造很多新轮子。目前来看，像 redux、mobx、dob 这些数据流都可以改造，Action 部分不用改，与 React 连接部分可以统统改为类似 useRedux useMobx useDob 的方式。

各种数据流内部 Provider 的实现方式，也可以利用 useContext 改造。

一波 renderProps 组件比如 react-powerplug 可以以很小成本支持 Hook 版本:

function App() {
  const {on, toggle} = useToggle()
}

还有更多可以挖掘的，比如 immer 可以将 produce 内置包裹在 setter 函数 useImmerState() 等等。

还有更多想法可以评论在下方。

[TongDaDa]

Hooks和redux有排斥性吧，也就是说redux能完成的事情，hooks可以完成，以后react用这些数据管理库可能会显得有些臃肿，可能会出现一些比较轻便的小轮子吧，怎么看？

[ascoders]

@TongDaDa Hooks 想要做单一数据流还需要封装一层，所以 redux 还是需要的（Provider），只是这一层的源码可以更薄，而 react-redux 可以被 hooks 取代了（Connect 被 useHook 取代）。

[zeromake]

awesome-react-hooks

真快啊。

[ascoders]

@zeromake 给力啊，另外 useImmer 居然这么快就有了。

[ascoders]

mobx-react-lite 是不错：

const inputs = useObservable([1, 3, 5])
return (
  <span onClick={() => inputs.push(5)}>{inputs.join(',')}</span>
)

不过 Action 不知道丢哪去了，这个简化的容易让代码失去抽象性，改数据还是抽到 Action 里好一些。

[zwl1619]

使用antd-mobile的表单，我想用hooks来写，《怎么用 React Hooks 造轮子》这篇文章中有个useAntdForm()函数，这个函数代码在哪里呢？
尝试写了一下TextareaItem组件，写了一半不知怎么写了，@ascoders 大佬能否指导一下，半成品代码如下：

    import React, { useState, useEffect} from "react"
    import { List, TextareaItem } from 'antd-mobile';
    import { createForm } from 'rc-form';
    
    
    function TextareaItemExample {
    
      useEffect(() => {
        //this.autoFocusInst.focus();
      });
    
      return (
        <div>
          <List renderHeader={() => 'Customize to focus'}>
            <TextareaItem
              title="title"
              placeholder="auto focus in Alipay client"
              data-seed="logId"
              ref={el => this.autoFocusInst = el}
              autoHeight
            />
            <TextareaItem
              title="content"
              placeholder="click the button below to focus"
              data-seed="logId"
              autoHeight
            />
          </List>
        </div>
      );
    }
    
    const TextareaItemExampleWrapper = createForm()(TextareaItemExample);
    
    export default TextareaItemExampleWrapper;

问题：
1、怎么获取表单的值？获取值后好用于发送ajax请求。react-use-form-state 用于原生html表单，怎么在antd表单中怎么做呢？

2、 class组件改成function组件后， this.autoFocusInst.focus(); 这个语句应该怎么写呢?

[ascoders]

@zwl1619
useAntdForm 函数需要你自己封装，目前还没有，文章的意思是可以做。

1. react-use-form-state 无法用在 antd。
2. .focus() 用 useRef 拿到 instance 即可。

[cike8899]

useState返回的第二个参数，当传递的参数不变的话，并不会rerender,所以你的force update写的有问题,有两种方式可以实现fore update

1. useState

const useUpdate = () => { 
  const [, setState] = useState(0); 
  return () => setState(cnt => cnt + 1); 
};

2. useReducer

 const [, forceRender] = useReducer(s => s + 1, 0);

[ascoders]

@cike8899 确实如此，感谢勘误，文章已修正！

[tanyplzu]

老师能否发下《怎么用 React Hooks 造轮子》这篇文章的原文地址？

[ascoders]

@tanyplzu issue 里没有写原文链接的，就是没有原文的精读，内容全是原创哈！