반응 : 소품이 변경 될 때 왜 하위 구성 요소가 업데이트되지 않는가 렌더링되지 않는 이유는

다음 의사 코드 예제에서 컨테이너가 foo.bar를 변경할 때 Child가 다시 렌더링되지 않는 이유는 무엇입니까? 

Container {
  handleEvent() {
    this.props.foo.bar = 123
  },

  render() {
    return <Child bar={this.props.foo.bar} />
}

Child {
  render() {
    return <div>{this.props.bar}</div>
  }
}

forceUpdate()컨테이너에서 값을 수정 한 후 호출해도 Child는 여전히 이전 값을 표시합니다.

답변

속성 ‘key’가 이름과 같도록 하위를 업데이트하십시오. 키가 변경 될 때마다 구성 요소가 다시 렌더링됩니다.

Child {
  render() {
    return <div key={this.props.bar}>{this.props.bar}</div>
  }
}

답변

부모의 소품이 바뀌면 자녀가 다시 렌더링하지 않지만 STATE가 변경되면 🙂

당신이 보여주는 것은 이것입니다 :
https://facebook.github.io/react/tips/communicate-between-components.html

소품을 통해 부모에서 자식으로 데이터를 전달하지만 거기에는 렌더링 논리가 없습니다.

일부 상태를 상위로 설정 한 다음 상위 변경 상태에서 하위를 다시 렌더링해야합니다. 도움이 될 수 있습니다.
https://facebook.github.io/react/tips/expose-component-functions.html

답변

나는 같은 문제가 있었다. 이것은 나의 해결책이며, 그것이 좋은 습관인지 확실하지 않습니다.

state = {
  value: this.props.value
};

componentDidUpdate(prevProps) {
  if(prevProps.value !== this.props.value) {
    this.setState({value: this.props.value});
  }
}

UPD : 이제 React Hooks를 사용하여 동일한 작업을 수행 할 수 있습니다 : (컴포넌트가 함수 인 경우에만)

const [value, setValue] = useState(propName);
// This will launch only if propName value has chaged.
useEffect(() => { setValue(propName) }, [propName]);

답변

React 철학에 따르면 구성 요소는 소품을 변경할 수 없습니다. 그것들은 부모로부터 받아야하며 불변이어야합니다. 부모 만이 자녀의 소품을 바꿀 수 있습니다.

상태 대 소품 에 대한 좋은 설명

또한이 스레드를 읽으십시오 . react.js에서 props를 업데이트 할 수없는 이유는 무엇입니까?

답변

setState기능 을 사용해야 합니다. 그렇지 않으면 state는 forceUpdate 사용 방법에 관계없이 변경 사항을 저장하지 않습니다.

Container {
    handleEvent= () => { // use arrow function
        //this.props.foo.bar = 123
        //You should use setState to set value like this:
        this.setState({foo: {bar: 123}});
    };

    render() {
        return <Child bar={this.state.foo.bar} />
    }
    Child {
        render() {
            return <div>{this.props.bar}</div>
        }
    }
}

코드가 유효하지 않은 것 같습니다. 이 코드를 테스트 할 수 없습니다.

답변

functions및 에서 React 구성 요소를 작성할 때 useState.

const [drawerState, setDrawerState] = useState(false);

const toggleDrawer = () => {
      // attempting to trigger re-render
      setDrawerState(!drawerState);
};

이것은 수행 하지 작업

         <Drawer
            drawerState={drawerState}
            toggleDrawer={toggleDrawer}
         />

이 작업을 수행합니다 (추가 키)

         <Drawer
            drawerState={drawerState}
            key={drawerState}
            toggleDrawer={toggleDrawer}
         />

답변

확인, 키 추가가 작동합니다. 나는 그 이유를 이해하고 시도하기 위해 문서를 살펴 보았습니다.

자식 구성 요소를 만들 때 React가 효율적이기를 원합니다. 다른 하위 요소와 동일한 경우 새 구성 요소를 렌더링하지 않으므로 페이지로드 속도가 빨라집니다.

키를 추가하면 React가 새 구성 요소를 렌더링하도록하여 새 구성 요소의 상태를 재설정합니다.

https://reactjs.org/docs/reconciliation.html#recursing-on-children