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

来自反应文档

render（）函数应该是纯的，这意味着它不会修改组件状态，每次调用时都返回相同的结果，并且它不直接与浏览器交互。如果需要与浏览器进行交互，请在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

您不应该在渲染方法中更新状态。移动它而是componentWillReceiveProps方法。有关详细信息，请阅读此documentation。

ReactJS理论呈现状态递归

2 个答案: