使用道具初始设置状态

Question

2）有没有另一种方法可以重写这个逻辑而不使用道具来设置状态？

父组件：

class App extends Component {

  constructor(props){
    super(props);
    this.state ={
      todos: []
    }
  }

  componentDidMount() {
    axios.get('https://jsonplaceholder.typicode.com/todos')
    .then(response => {
      this.setState({ todos: response.data })
    });
  }

  render() {
    if(!this.state.todos){
      return <div>Loading...</div>
    }
    return (
        <div className="container">
          <div className="row">
            {
              this.state.todos.map((todo, i) => {
                return (
                  <Todo todo={todo} key={i}/>
                )
              })
            }
          </div>
        </div>
    );
  }
}

子组件

class Todo extends Component{

  constructor(props) {
    super(props);
    var { title, completed, userId } = this.props.todo;
    this.state = { title, completed, userId }
  }
  changeCompletion = () => {
    this.setState({completed: !this.state.completed})
  }

  render() {
    return(
      <div className="col-md-4 col-sm-6">
        <div className={"card card-inverse text-center " + (this.state.completed ? 'card-success' : 'card-danger')}>
          <div className="card-block">
            <blockquote className="card-blockquote">
              <p>{ this.state.title }</p>
            </blockquote>
            <button onClick={this.changeCompletion} className={"btn btn-sm " + (this.state.completed ? 'btn-danger' : 'btn-success')}>{ this.state.completed ? 'incomplete' : 'complete'} </button>
          </div>
        </div>
      </div>
    )
  }
}

Answer 1

1.我所做的是否被认为是反模式？-也许，是的

问题是子组件的构造函数只在多个呈现中运行一次。如果在子组件中使用setstate()来重新呈现，构造函数将不会再次运行，因此道具和状态不同步，这就是本文提到的“真理的多源”问题。

如果重新呈现父组件（通过状态更改、道具更改或this.forceUpdate())，子组件的构造函数将不会重新执行。也就是说，React这样做是为了在内部提高性能，您可以使用console.log()来调查组件的生命周期。

<Todo todo={todo} key={i} onChangeCompletionCallback={() => {
    let clonedState = Object.assign({}, this.state);
    clonedState.todos[i].completed = !clonedState.todos[i].completed;
    this.setState(clonedState);
}}/>    

changeCompletion = () => {
    this.props.onChangeCompletionCallback();
}

让我们首先澄清render术语。React中有两种呈现:

• 真实DOM呈现:慢
• 虚拟DOM呈现:（设计为）快速

现在，如果您真正的DOM呈现200个todos，这肯定是不好的。但是如果您虚拟DOM呈现200个todos，这取决于情况。但大多数情况下，它会很快。

null

因此，我认为在这种情况下，手动配置ShouldComponentUpdate(...)html" target="_blank">生命周期方法不会有太大帮助。看起来您保存了199个虚拟DOM呈现，但实际上您是在浪费精力。