Question

我是React钩子上的新手，但是我在文档中看不到这个

const MyComponent = ({myProp}) => {
 const [myPropHook, setPropHook] = useState(myProp)
...
}

我想知道这是否是一个好习惯？

Answer 1

您传递给useState的值将用作状态变量的起始值。因此，当组件属性更改时，它们不会影响您正在使用的状态变量。初始值将是发送到组件的第一个道具，此后只能使用setPropHook函数进行修改。

因此，简而言之，将道具用作useState的初始化程序绝对是一种代码味道，因为读取代码无法正确传达实际发生的事情。

Answer 2

您不会看到太多，因为就React应用程序应如何分配状态而言，这没有多大意义。

如果将prop值设置为更高的树，则不应将其用作组件内单独状态的一部分。使用prop值间接确定组件的状态是有意义的，例如“如果prop是this，则将状态设置为那个”，而不是直接将prop复制到初始中值。

换句话说，组件的内部状态（通过useState和useReducer挂钩访问）应由组件确定，而不是直接由父组件确定。

Answer 3

是的，这很糟糕。您正在做的是将道具传递给国家，许多人不赞成。

React文档说，“使用道具生成状态通常会导致“真相来源”重复，即真实数据在哪里。” 。危险是，如果在不刷新组件的情况下更改道具，则永远不会显示新的道具值，因为道具的状态初始化仅在首次创建组件时运行。

唯一的例外是将prop用作内部控制状态的种子。经过几年的反应开发，我从未遇到过这样的情况。

进一步阅读：
React component initialize state from props（SO问题）
React Anti-Patterns: Props in Initial State（medium.com文章）
Why Setting Props as State in React.js is Blasphemy（博客文章）

Answer 4

如果您尝试接收该功能组件的道具，那么可以，但是不完全像您编写的那样。因此，在父组件中，您将具有以下内容：

const App = () => {
  const [resource, setResource] = useState("posts");

然后JSX内部有一个组件，如下所示：

const App = () => {
  const [resource, setResource] = useState("posts");

  return (
    <div>
      <div>
        <button onClick={() => setResource("posts")}>Posts</button>
        <button onClick={() => setResource("todos")}>Todos</button>
      </div>
      <ResourceList resource={resource} />
    </div>
  );
};

该ResourceList组件必须能够接收App组件传递给它的道具。在基于类的组件中，您可以进行{this.props.resource}，但是在我们的示例中，使用React钩子的功能组件要像这样编写：

const ResourceList = (props) => {
  const [resources, setResources] = useState([]);

或通过ES6破坏性的构建：

const ResourceList = ({ resource }) => {
  const [resources, setResources] = useState([]);

在react hook上使用props值不好吗？

4 个答案: