反應，我應該從道具設置狀態嗎？

Question

我總是直接使用props而不將其設置為state，並且效果很好，但是我應該真正從props設置state，然后使用該狀態。 有什么不同？

Class A extends Component {
    ...some method,
    render() {
      return <>{this.props.message}</>
    }
}

Class A extends Component {
    constructor() {
       super();
       this.state = {
          message: ''
       }
    }
    componentDidMount(){
       this.setState({message: this.props.message})
    }
    render() {
      return <>{this.state.message}</>
    }
}

Answer 1

如果值相同，則確實沒有必要。 考慮到每次使用this.setState()都會導致組件的其他重新渲染。 付出的代價很小，但是如果您說10000條消息，那以后可能會意味着更多。 因此，通過更新state不會提供任何好處。 只需直接使用道具即可。

如果您打算將道具用作中介檢查，則更新狀態會有些意義。 假設您有這樣的事情：

class App extends React.Component{
   state = {
     display: none
   }

   componentDidUpdate(){
      if(this.props.data.length > 0){
        this.setState({
           display: true
        })
      }
   }

   render(){
     <div>
       { this.state.display ? "Show value" : "" }
     </div>
   }
}

我們可以使用道具來更新狀態值，該狀態值確定是否應顯示某些內容。

Answer 2

最好使用props中的數據，而無需更新它來聲明僅添加2 3行代碼和setState函數的額外執行，但是用戶不會有任何不同。