• 这可能是一个问题更复杂的数据结构。例如,假设你想要一个ListOfWords组件呈现一个以逗号分隔的单词,和父母WordAdder组件允许您单击一个按钮一个词添加到列表中。这段代码不能正常工作.

  问题是,PureComponent将做一个简单的对比新旧this.props.words的价值观。因为这段代码中的变异词数组 handleClick WordAdder方法,新旧this.props的价值观。的话会比较平等,即使实际的单词数组中已经改变了。 ListOfWords因此不会更新,尽管它应该呈现新单词

  class ListOfWords extends React.PureComponent {
  render() {return <div>{this.props.words.join(',')}</div>;}}
  class WordAdder extends React.Component {
  constructor(props) {super(props);
     this.state = {words: ['marklar']};}
  handleClick =()=> {// This section is bad style and causes a bug
    const words = this.state.words;
    words.push('marklar');
    this.setState({words: words});}
  render() {return (<div><button onClick={this.handleClick} />
     <ListOfWords words={this.state.words} /></div>);}}
  ReactDOM.render(<WordAdder/>,document.getElementById('root'));

主要问题:第七行的 const words 对 this.state.words只是一个引用，并没有改变它的长度 length。因为引用了，所以会显示单词。
具体解决办法：先将 const words引用一个空，把 this.state.words.length 进行一个 let 的循环，把的 words的 length 更新push，然后显示 length

class ListOfWords extends React.PureComponent {
  render() {return <div>{this.props.words.join(',')}</div>;}}
class WordAdder extends React.Component {
  constructor(props) {super(props);
    this.state = {words: ['marklar']};}
  handleClick = () => {// This section is bad style and causes a bug
    const words = [];
    for(let i = 0; i < this.state.words.length; i++){words.push(this.state.words[i])}
    console.log(`words length is ${words.length}`);
    words.push('marklar');
    console.log(`words length is ${words.length}`);
    this.setState({words: words});}
  render() {return (<div><button onClick={this.handleClick}>Button</button>
     <ListOfWords words={this.state.words} /></div>);}}
ReactDOM.render(<WordAdder />, document.getElementById('root'));

执行结果：点击六次，显示长度为6