ReactJS 이론 렌더링 상태 재귀

-1

render() 함수를 다시 호출하지 않고 render() 함수 내에서 상태 변수를 변경할 수 있습니까 ??ReactJS 이론 렌더링 상태 재귀

이것을 시도하면 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 }}> 
    .

출처

2017-10-26 wordisbarn

이 구성 요소의 상태를 변경하지 않는 것을 의미 문서가

기능은 순수해야한다) (렌더링 반응, 같은 결과를가 호출 될 때마다 반환 브라우저와 직접 상호 작용하지 않습니다. 브라우저와 상호 작용해야하는 경우 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

출처

2017-10-26 18:43:19 finalfreq

응답 해 주셔서 감사합니다. redux로부터 데이터를 검색하는 작업을 보내고 상태 변수를 설정해야한다고 가정 해보십시오. 렌더를 호출하지 않고 어떻게 상태 변수를 설정합니까? 가능한가? – wordisbarn

redux를 사용하고 나면 전역 상태가됩니다 (구성 요소 상태를 가질 수는 있지만 일반적으로 redux 전역 상태를 사용하게됩니다). 저장소 상태를 업데이트하여 데이터를 검색하지 않으려는 경우 작업을 디스패치합니다. 구성 요소가 redux 저장소에서 데이터를 가져 오게하려면'mapStateToProps' 기능을 사용해야합니다. redux는 특정 저장소 상태를 구성 요소의 소품으로 매핑합니다. – finalfreq

당신의 상태를 업데이트하는 방법을 렌더링하지 않아야합니다. 대신 componentWillReceiveProps 메서드로 이동하십시오. 자세한 내용은 documentation을 읽어보십시오.

출처

2017-10-26 18:46:01

ReactJS 이론 렌더링 상태 재귀

답변

관련 문제