Question

在React Native文档的这个页面React Native State上，我们有以下声明：

道具由父级设置，并且在组件的整个生命周期内都是固定的。

但是，在React docs的这个页面React State and Lifecycle上，我们有以下声明：

因为this.props和this.state可以异步更新，所以不应该依赖它们的值来计算下一个状态。

我的误解在哪里？对我来说，组件的生命周期将在从DOM中删除组件时结束。因此，给定第一个语句，我可以在我的组件的任何部分访问this.props值，而不仅仅是在render方法上，但这不是第二个语句所说的。

Answer 1

第二个声明只是说您不应该使用this.props或this.state来更新您的状态，因为多个更新将通过反应进行批处理。如果您这样做这样：

class MyComp extends React.Component{
    constructor(props) {
        super(props);

        this.state = {
            aValue: 0,
        };
    }

    componentDidMount() {
        this.setState({aValue: this.state.aValue + 1}); // should be 1 now
        this.setState({aValue: this.state.aValue + 1}); // should be 2 now
    }

    render() {
        return (
            <p>{this.state.aValue}</p>
        );
    }
}

如果你这样做，你最终可能会得到一个州：{aValue: 1}因为反应将批量更新，导致第二次更新覆盖你的第一次更新，因为this.state.aValue目前还没有更新对setState()的第二次调用发生了，仍然是0。

相反，你必须将一个函数传递给setState()，它传递新的状态和props并返回下一个状态：

this.setState((nextState, nextProps) => ({aValue: nextState.aValue + 1}));

没有任何关于您可以访问this.state或this.props的信息。

Answer 2

React and React Native props的行为方式完全相同。两者都从父级传递给子级，不应在子组件中进行变异（编辑）。

React道具和React Native道具的行为有何不同？

2 个答案: