ReactJS理論レンダリング状態の再帰

Question

render（）関数内で状態変数を変更せずに、render（）関数を再呼び出しすることはできますか？

これを試してみると、render（）を再帰的に呼び出すように見えます。これはベストプラクティスですか？

例：

constructor(props) { 
     super(props) 
     this.state = { 
      maxWidth: `${window.innerWidth - 100}px` 
     } 
    } 
    . 
    . 
    . 
    render() { 
     const defaultTabCheck =() => { 
      if (this.props.tabsProperties.length > 0) { 
       this.setState({ 
        maxWidth: `${window.innerWidth - 72}px` 
       }) 
      } 
     } 

     return (
      <span style={‌{ width: this.state.maxWidth }}> 
    . 

Answer 1

ザがドキュメント

を反応からレンダリング（）関数は、それがコンポーネントの状態を変更しないことを意味し、純粋であるべきで、それは同じ結果にそれが呼び出されるたびに返しますブラウザと直接対話しません。ブラウザと対話する必要がある場合は、代わりにcomponentDidMount（）または他のライフサイクルメソッドで作業を行います。 render（）を純粋に保つことで、コンポーネントを考えるのが簡単になります。

このチェックでは、あなたのコンストラクタで行い、小道具が変更されるたびにcomponentWillReceivePropsにしてください。

constructor(props) { 
    super(props); 

    this.state = { 
     maxWidth: props.tabsProperties.length > 0 ? `${window.innerWidth - 72}px` : `${window.innerWidth - 100}px` 
    } 
} 


componentWillReceiveProps(nextProps) { 
    if (nextProps.tabsProperties.length > 0 && this.props.tabsProperties.length === 0) { 
    this.setState({ 
     maxWidth: `${window.innerWidth - 72}px` 
    }) 
    } 
} 

機能をレンダリングするにはあなたは、そのアンチパターンを状態を更新することはありません、あなたは再帰そのないのベストプラクティスから保護するためにshouldComponentUpdateを使用した場合でも。代わりに、その目的が状態/小道具の変更に対応し、それに応じて行動するライフサイクル・メソッドを使用してください。

https://reactjs.org/docs/react-component.html#render

Answer 2

あなたはrenderメソッドで状態を更新してはいけません。その代わりに componentWillReceivePropsメソッドに移動してください。詳細については、documentationをお読みください。