javascript - React 中嵌套组件的最佳实践

Question

我有 2 个嵌套组件:

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

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

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

现在，我希望它在父类的状态发生变化时呈现 SubComponent。这是由 React 自动完成的，但我可以通过两种方式来完成:

选项 1(带状态):

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>
        );
    }
}

选项 2(带有实例变量):

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>
        );
    }
}

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

function SubComponent(props) {
    return (
        <h1>Name: {props.person.name}</h1> 
    );
}

它们都有效，但是:

1. 哪个更好？在性能、可维护性等方面
2. 我的两个选择是不好的做法吗？我怎样才能更好地处理这种问题？

我找不到这方面的示例。

提前致谢，对我的英语感到抱歉

Answer 1

正如我试图在评论中解释的那样，您不需要执行任何操作来渲染您的子组件。如果子组件的 props 通过父组件发生更改，则子组件将重新渲染。所以，不要将其 props 设置为 state，而是直接使用 props。

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

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

  handleChange = e => {
    const { target } = e;
    this.setState( prevState => ({
      person: { ...prevState.person, name: target.value }
    }) )
  }

  render() {
    return (
      <div>
      <p>Change name</p>
      <input onChange={this.handleChange} />
        <SubComponent
          person={this.state.person}
        />
      </div>
    );
  }
}

class SubComponent extends React.Component {
  render() {
    return (
      <h1>Name: {this.props.person.name}</h1>
    );
  }
}

ReactDOM.render(<Component1 />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>