Javascript React中嵌套组件的最佳实践

我有两个嵌套组件：

class Component1 extends React {
    constructor(props) {
        super(props);

        this.state = {
            person: {
                name: "Genaro",
                age: 125
            }
        };
    }

    render() {
        return (
            <SubComponent
                person={this.state.person}
            />
        );
    }
}

选项2（带有实例变量）：

class SubComponent extends React {
    constructor(props) {
        super(props);

        this.state = {
            person: props.person
        };
    }

    componetWillReceiveProps(props) {
        this.setState({ person: props.person });
    }

    render() {
        return (
            <h1>Name: {this.state.person.name}</h1>
        );
    }
}

class SubComponente extends React {
    constructor(props) {
        super(props);

        this.person = props.person;
    }

    componetWillReceiveProps(props) {
        this.person = props.person;
    }

    render() {
        return (
            <h1>Name: {this.person.name}</h1>
        );
    }
}

类子组件扩展{
建造师（道具）{
超级（道具）；
this.person=props.person；
}
componetWillReceiveProps（道具）{
this.person=props.person；
}
render（）{
返回(
姓名：{this.person.Name}
);
}
}

我只能使用一个类（我需要调用很多实例方法）。这就是为什么我不能这样做的原因（更干净的方式）：

功能子组件（道具）{
返回(
姓名：{props.person.Name}
);
}

这两种方法都有效，但：

哪个更好？在性能、可维护性等方面

我的两个选择是错误的做法吗？我怎样才能更好地处理这类问题

我找不到这方面的例子

---

提前感谢并对我的英语表示歉意

正如我在评论中试图解释的那样，您不需要做任何事情来呈现您的

子组件

。如果子组件的道具通过父组件更改，则子组件将重新渲染。因此，不要将其道具设置为状态，而是直接使用道具

类组件1扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
人:{
姓名：“Genaro”，
年龄:125
}
};
}
handleChange=e=>{
常数{target}=e；
this.setState（prevState=>({
人员：{…prevState.person，名称：target.value}
}) )
}
render（）{
返回(
改名

);
}
}
类子组件扩展了React.Component{
render（）{
返回(
名称：{this.props.person.Name}
);
}
}
render（，document.getElementById（“根”））
正如我在评论中试图解释的那样，您不需要做任何事情来呈现
子组件。如果子组件的道具通过父组件更改，则子组件将重新渲染。因此，不要将其道具设置为状态，而是直接使用道具


类组件1扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
人:{
姓名：“Genaro”，
年龄:125
}
};
}
handleChange=e=>{
常数{target}=e；
this.setState（prevState=>({
人员：{…prevState.person，名称：target.value}
}) )
}
render（）{
返回(
改名

);
}
}
类子组件扩展了React.Component{
render（）{
返回(
名称：{this.props.person.Name}
);
}
}
render（，document.getElementById（“根”））

实际上，您不需要在
子组件中执行任何操作。当父级的状态发生变化，并且它会自动重新启动您的
子组件，因为它的属性发生了变化。这两种情况都是不好的。如果不需要更改子组件中
person
的值，则不要将其保存到state（或实例变量，这本身就很奇怪）。只需将其用作渲染函数中的this.props.person，不需要代理。除非您真的需要，否则请避免同步道具和状态，因为这是常见的bug源。componentWillReceiveProps最近在最新的React版本中被认为是一种不安全的方法。选中“实际上不需要在
子组件中执行任何操作”复选框。当父级的状态发生变化，并且它会自动重新启动您的
子组件，因为它的属性发生了变化。这两种情况都是不好的。如果不需要更改子组件中
person
的值，则不要将其保存到state（或实例变量，这本身就很奇怪）。只需将其用作渲染函数中的this.props.person，不需要代理。除非您真的需要，否则请避免同步道具和状态，因为这是常见的bug源。componentWillReceiveProps最近在最新的React版本中被认为是一种不安全的方法。检查一下，这就是为什么我喜欢堆栈溢出，愚蠢的我，我从来没有意识到在使用道具直接！非常感谢你！不客气。不，一点也不愚蠢！只是有点缺乏信息。我建议先看一下官方文件。它很好地解释了基本的东西。这就是为什么我喜欢堆栈溢出，我真愚蠢，我从来没有意识到直接使用道具！非常感谢你！不客气。不，一点也不愚蠢！只是有点缺乏信息。我建议先看一下官方文件。它很好地解释了基本的东西。
function SubComponent(props) {
    return (
        <h1>Name: {props.person.name}</h1> 
    );
}