Question

我正在学习reactjs的生命周期方法。为了深入理解，我试图通过创建自我的例子来学习。我做的是，我创建了一个名为colors的对象，我将它们传递给ColorButtons组件。获取颜色对象以根据道具中的颜色显示按钮。我可以显示按钮，但是当我点击时，让我们说＃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

非常简单 - 你不会改变道具。

这是一个小测试，点击时会触发你的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'))

nextProps未显示在我的componentWillRecieveProps中

1 个答案: