javascript - nextProps 未显示在我的 componentWillRecieveProps 中

Question

正在学习reactjs的生命周期方法。为了更深入地理解，我尝试通过创建 self 示例来学习。我所做的是，我创建了一个名为颜色的对象，并将它们传递给 ColorButtons 组件。获取颜色对象以根据 Prop 中的颜色显示按钮。我可以显示该按钮，但是当我单击 #fd5c63 颜色按钮时，应该会发生一些事件。如果我一次又一次单击同一个按钮，则不应重新呈现页面。如果我是对的，我必须使用 componentWillRecieveProps 和 ShouldComponentUpdate。这就是为什么我想深入了解它们。如果我对重新渲染部分的理解是正确的，为什么我的 componentWillRecieveProps 没有在控制台中显示任何内容？谁能帮助我理解我正在谈论的场景？

这是我的代码

const colors = [
  {id:1, color: '#00a98f'},
  {id:2, color: '#fd5c63'},
  {id:3, color: '#49176d'}
];

render(<ColorButtons colors = {colors} />, document.querySelector('#app'))

class ColorButtons extends React.PureComponent {
  constructor(props) {
      super(props);
  }

  componentWillReceiveProps(nextProps) {
    console.log(`nextProps ${nextProps}`);
  }

 render() {
     const colorBtn = () => this.props.colors.map((color, i) => 
                                  <ColorButton 
                                    color={color.color} 
                                    key={color.id} 
                                    onClick={()=>console.log(color.color)}
                                  />
         );
    return (
    <Wrapper>
      <Title>Hello World, this is my first styled component!</Title>
      {colorBtn()}
    </Wrapper>
    ) 
  }                                 
}

export default ColorButtons;

这是工作示例

https://www.webpackbin.com/bins/-Kif7NlLz5BCDXQ18fyg

Answer 1

非常简单 - 你不需要改变 props。

这是一个小测试，单击时将触发 console.log 行:

class ButtonSwitcher extends React.Component {
  constructor() {
    super()
    this.state = {
      colors: [
        {id:1, color: '#00a98f'},
        {id:2, color: '#fd5c63'},
        {id:3, color: '#49176d'}
      ]
    } 
  }

  render() {
    const colors = this.state.colors
    const onClick = ()=> {
      const [a, b, c] = this.state.colors
      this.setState({colors: [b, c, a]})
    }

    return (
      <div onClick={onClick}>
        <ColorButtons colors = {colors} />
      </div>
    )
  }
}

render(<ButtonSwitcher/>, document.querySelector('#app'))