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

다음 의사 코드 예제에서 컨테이너가 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

setState 함수를 사용하십시오. 그래서 당신은 할 수 있습니다

       this.setState({this.state.foo.bar:123}) 

핸들 이벤트 메소드 내부.

상태가 업데이트되면 변경 사항이 트리거되고 다시 렌더링됩니다.

상태를 유지하지 않고 단순히 소품을 렌더링 한 다음 부모에서 호출하면 Child를 기능적 구성 요소로 만들어야합니다. 이에 대한 대안은 기능 구성 요소 (useState)와 함께 후크를 사용하여 상태 비 저장 구성 요소를 다시 렌더링 할 수 있다는 것입니다.

또한 propas가 불변이므로 propas를 변경해서는 안됩니다. 구성 요소의 상태를 유지하십시오.

Child = ({bar}) => (bar);

같은 문제가 발생했습니다. 나는 한 Tooltip수신 된 구성 요소 showTooltip나에 업데이트되었다, 소품을 Parent온 기반 구성 요소 if상태가 업데이트지고 한 Parent구성 요소 만 Tooltip구성 요소가 렌더링되지 않았습니다.

const Parent = () => {
   let showTooltip = false;
   if(....){ showTooltip = true; }
   return(
      <Tooltip showTooltip={showTooltip}></Tooltip>
   )
}

내가했던 실수 showTooltip는 let 으로 선언 하는 것입니다.

내가 잘못하고있는 것을 깨달았고 렌더링이 작동하는 방식의 원칙을 위반하고 있다는 것을 깨달았습니다.

const [showTooltip, setShowTooltip] =  React.useState<boolean>(false);

하위 컴포넌트에서 connect 메소드의 mapStateToProps에서 변경된 props를 정의하십시오.

function mapStateToProps(state) {
  return {
    chanelList: state.messaging.chanelList,
  };
}

export default connect(mapStateToProps)(ChannelItem);

필자의 경우 channelList의 채널이 업데이트되어 mapStateToProps에 chanelList를 추가했습니다.