在React中将更多参数传递给纯渲染函数

Question

最近我一直试图把我的React组件写成"Pure Functions",我注意到有时候我想要的东西感觉很像state.我正考虑将我state的第二个参数传递给我的组件.我可以通过使用两个参数调用我的组件作为普通函数来实现这一点,props并且state.

例如:

// abstracted to it's own module
const useState = (Component, state = {}) => {
  return class extends React.Component {
    state = createState(this, state); // will traverse and update the state

    render() {
      const { props, state } = this;
      return Component(props, state); // <-- call the Component directly
    }
  };
};

const Component = (props, { index, increase }) => (
  <div onClick={increase} {...props}>
    Click me to increase: {index}
  </div>
);
const componentState = {
  index: 0,
  increase: (event, state) => ({ ...state, index: state.index + 1 })
}; 
const StatefullComponent = useState(Component, componentState);

<StatefullComponent style={{ color: "purple" }} />;

我有一个CodeSandbox示例:

我的问题是:

1. 这种模式会损害性能吗？
   • 我不再用状态值扩展道具,这可能是一件好事
   • 我正在搞乱组件默认呈现的方式,这可能是件坏事
2. 这个模式会破坏这样的东西shouldComponentUpdate吗？(我有一种下沉的感觉,这是对旧contextapi的建模)
3. 我是多么担心未来的反应更新会破坏这段代码？
4. 是否有更多的"Reacty"方式在Pure函数中使用State而不使用像Redux这样的库？
5. 我想解决一些不应该解决的问题吗？

注意:我state在此示例中使用,但它也可能是theme,授权规则或您可能希望传递到组件中的其他内容.

---

编辑19-03-2018:我注意到人们似乎对我的要求感到困惑.我不是在寻找一个新的框架或关于"你为什么要分开你的顾虑？"的对话.我非常确定这种模式会清理我的代码并使其更加可测试和"更清洁".我真的想知道React框架是否会以任何方式阻碍这种模式.

Answer 1

乍一看，当我检查你的代码时，我有一个问题：

\n\n

\n

“为什么要把它弄得这么复杂？当你可以简单地通过类声明来实现它时”。

\n

\n\n

但后来当我分割你的代码时时，我发现这样做真的值得。

\n\n

问题一：实际上并没有什么区别，这是 HOC 进行组合的方式。

\n\n

\n

我不再用状态值扩展 props，这可能是一件好事

\n

\n\n

为什么/什么时候这可能是一件好事？

\n\n

\n

我弄乱了组件默认渲染的方式，这可能是一件坏事

\n

\n\n

我认为默认情况下你不会破坏或弄乱渲染，我认为HOC模式提倡相同的理念，即将状态与道具分开的区别。

\n\n

问题 2：如果开发人员决定使用无状态组件，那么他/她应该实现所有 \xe2\x80\x9clifecycle 方法\xe2\x80\x9d 或引用ref将不可用。

\n\n

您的模式使无状态组件为 \xe2\x80\x9cstatefull\xe2\x80\x9d 但处于无状态声明中 - 令人惊叹。

\n\n

像JSX你在 JS 中编写一个“HTML”，并在其中编写带有另一个“HTML”的 JS 代码：

\n\n

<ul>\n  {list.map(text => <li>text</li>)} // I know there should be used key\n</ul>\n

\n\n

Mr. Baudin模式（全状态就像无状态）：

\n\n

import React from \'react\'\nimport {useState} from \'./lib\'\n\nconst state = {\n  index: 0,\n  increase: (event, state) => ({index: state.index + 1})\n}\n\nconst Component = (props, state) => (\n  <div onClick={state.increase} {...props}>\n    Click me to increase: {state.index}\n  </div>\n)\n\nexport default useState(Component, state)\n

\n\n

问题3：这取决于未来版本中会有哪些重大更改。

\n\n

问题4：嗯...我不认为所提供的模式（实现的库）可以被视为应用程序状态管理，但它可以在任何状态管理（如 Redux 或 Mobx）中使用，因为它处理内部组件状态。

\n\n

问题5：不，我不这么认为。您的解决方案使代码更少、更干净。函数式组件适用于非常简单或具有代表性的组件，现在它可以通过状态进行扩展。

\n