哪个选项最适合在 React 功能组件中创建新的类实例？答案

【问题标题】：Which option is best for creating new class instance in React functional component?哪个选项最适合在 React 功能组件中创建新的类实例？
【发布时间】：2020-03-31 18:33:57
【问题描述】：

关于在 React 功能组件中创建新类实例的一般问题。我将 Tone.js 用于项目和此处的示例，但与任何事情都相关。

选项 A 和 B 之间哪个是正确的模式？ B 是常见的，但如果 A 不正确，为什么？如果使用 useEffect，则发生第一次渲染然后创建实例似乎效率低下。所以你的代码充满了channels.current && doSomething()。为什么不能作为 useRef 初始值？

如果 ref 在重新渲染后保持其值，是否需要 useEffect ？

如果我想在某个时候更新值 (4,0)，动态值，而不是 useRef，将类实例创建为选项 C 中的 useState 初始值是否明智？

A.作为 useRef 初始值

const channels = useRef({
    channel01: new Tone.Channel(4, 0),
    channel02: new Tone.Channel(4, 0),
    channel03: new Tone.Channel(4, 0)
  });

B. useEffect 启动 ref

const channels = useRef(null);

useEffect(() => {
    channels.current = {
      channel01: new Tone.Channel(4, 0),
      channel02: new Tone.Channel(4, 0),
      channel03: new Tone.Channel(4, 0)
    }
  }, []);

C.作为useState初始值

const [channels, setChannels] = useState({
    channel01: new Tone.Channel(4, 0),
    channel02: new Tone.Channel(4, 0),
    channel03: new Tone.Channel(4, 0)
  })

【问题讨论】：

答案取决于用例...选项B没用。

标签： javascript reactjs functional-programming react-hooks

【解决方案1】：

这似乎是一个非常基于意见的问题，所以显然每个人的意见都会有所不同，但这是我的两分钱。没有依赖关系的 useEffect，即在 mount 上只调用一次，通常更喜欢像这样从服务器填充初始数据：

useEffect(()=>{
        axios.get('http://yourserver.com/someendpoint')
            .then(res=>{
                if(res.status === 200){
                    setData(res.data);
                }
            })
            .catch(err=>console.log(err))
    },[]);

当然，现在不同的框架开发了不同的方式，比如我经常使用 next.js，在其中你可以使用 getInitialProps() 之类的东西。但想法是一样的。

在我看来，对您来说最好的情况还是使用 C。设置数据（尤其是默认值）通常在 state 中完成，这样如果您在填充 state 之前在任何地方调用 state，您就不会遇到意外错误。

最重要的是，React 开发人员普遍同意这个约定，以防你的代码落在别人的桌子上。如果说使用 state 来初始化数据和 useEffect 从服务器等获取初始数据，他/她会很熟悉它。这也是基于多年工作和与遵循约定的 react 开发人员合作的意见。干杯:)。

【讨论】：