Question

我是新来的人，有一个关于组件的问题。我做了一个这样的组件：

    class HeaderLabel extends React.Component {
    constructor() {
        super();
    }

    componentWillMount() {
        this.setState({ value: String(this.props.value) });
    }

    render() {
        return (
            <div>
                {this.props.value && this.props.value != "" ? <label className="control-label">{this.props.value}</label> : <label className="text-muted">({Translation.getPhrase("EMPTY")})</label>}
            </div>
        );
    }
}

HeaderLabel.propTypes = {
    value: PropTypes.string
}

export default HeaderLabel;

您会看到我正在使用this.props.value来显示值。这是正确的方法还是使用this.state.value更好？

Answer 1

简短答案：使用this.props.value。

由于您是直接从道具中获取值而不以某种方式对其进行更改，因此首先将其存储在状态中然后使用this.state.value根本没有任何好处。

基本上，这归结为React的基本思想，即您应该永远只有“一个真理的源头” 。通过在道具和状态中同时使用value，您就有两个真理的来源。作为开发人员，您应该尝试拥有一个“主状态”，将数据向下传递到其组件。

有时候，不管怎么说，将prop值直接存储到您的状态是一个好主意。例如，您可能希望有一个父组件，其中包含一个在应用程序中显示的字符串。可以在单击相应按钮时打开的模式中修改此字符串。 “临时编辑不足”字符串将处于模式状态，而先前保存的字符串仍保留在主组件中。

您可能会发现此官方博客文章对您有所帮助：You Probably Don't Need Derived State

Answer 2

在此示例中，您正在使用props值来显示您已接收的数据，然后使用this.props.value是有意义的。道具是只读的，这意味着孩子不是该特定数据的所有者，因此它不能更改该数据上的任何内容。

当使用this.state.value时，假设您从父级获取数据，并且必须在显示之前对这些数据进行一些操作，然后在这种情况下，将props置于状态并进行操作

Answer 3

您可以同时使用this.props.value和this.state.value。但是首先您必须回答以下问题。根据答案，您可以选择适当的方式来设置值。哪个组件处理从this.props.value接收到的值的后续更改：

值的更改来自父组件。那么您应该使用this.props.value。无需将this.props.value分配给this.state.value。因为状态是在父组件内部维护的。

2.Change由HeaderLabel组件本身处理。然后，您应该设置this.state.value。

反应使用this.state或this.props吗？

3 个答案: