React Hooks -从props中使用useState()初始化状态变量的推荐方法是什么? &g

Question

我在问是否有(如果是，什么是)推荐的方法来初始化状态变量在React钩子从props的值。

我假设我有一个这样的组件:

function SomeComponent(props) {
return (
....
);
}

我可以使用useState为这个组件创建一个变量，如下所示:

const [someVariable, setSomeVariable] = useState('someValue');

到目前为止一切顺利。我现在的问题是，如果我想用props的值初始化变量，是否建议像这样直接赋值:

function SomeComponent(props) {
const [someVariable, setSomeVariable] = useState(props.someValue);
}

或者用null初始化它，然后用useEffect()设置加载时的值更好:

function SomeComponent(props) {
const [someVariable, setSomeVariable] = useState(null);
useEffect(() => {
setSomeVariable(props.someValue);
},[])
}

也许还有更多的方法。我只是想知道这里是否有一个建议，或者最终你使用哪种方法并不重要。

Answer 1

您应该采用第一种方法。这是标准的、习惯的React方式。

function SomeComponent(props) {
const [someVariable, setSomeVariable] = useState(props.someValue);
}

useEffect的方法也会工作，但你没有任何理由这样做，更不用说状态将是null的第一次你的组件呈现。

Answer 2

最好使用useState(props.someValue)而不是在useEffect中设置，因为useEffect在之后执行React完成对组件的渲染，这样做会触发重新渲染，因为你正在设置一个新状态。如果你在useState中设置它，你将能够避免额外的重新渲染。

编辑:根据你的组件的逻辑，你可能不得不处理null状态在你的组件，如果你在useEffect

Answer 3

如果道具不变，则不需要使用useState。

如果它改变了，这样做:

function SomeComponent(props) {
const [someVariable, setSomeVariable] = useState(props.someValue);
useEffect(() => {
setSomeVariable(props.someValue);
},[props.someValue])
}

阅读这个问题&

反应。useState不从props中重载状态

---

我会这样做:

function SomeComponent({someValue}) {
const [someVariable, setSomeVariable] = useState(someValue);
useEffect(() => {
setSomeVariable(someValue);
},[someValue])
}