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

当我试图在我的评论中解释时，你不需要做任何事情来渲染你的Subcomponent。如果子组件的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>