새로운 React Context API는 재렌더를 트리거합니까?

새로운 React Context API는 재렌더를 트리거합니까?

나는 새로운 React Context API를 이해하려고 노력했고 그것을 가지고 놀고 있었다.간단한 사례를 확인하려고 합니다. 프로바이더에 대한 데이터가 업데이트되면 모든 것이 재렌더됩니다.

Codesandbox에서 이 작은 예를 확인합니다.

이 예에서는,Appcomponent - 다음과 같은 상태를 가진 컴포넌트 -

this.state = {
  number - A random number
  text - A static text
} 

여기서부터 다음을 포함하는 새로운 리액트 컨텍스트를 만듭니다.number그리고.text주(州)에서 두 소비자에게 값을 전달합니다.Number그리고.Text.

따라서 랜덤 번호가 갱신되면 콘텍스트가 변경되어 양쪽 컴포넌트가 재렌더를 트리거할 것으로 상정하고 있습니다.

그러나 실제로는 가치가 업데이트되고 있지만 렌더는 발생하지 않습니다.

그래서, 내 질문은...

1. 사용 재렌더를 통해 전달되지 않는 문맥에 대한 업데이트가 이루어집니까?콘텍스트가 바뀌면 로그/컬러 변화가 보이지 않기 때문입니다.

2. 해당 프로바이더의 모든 소비자가 업데이트되었습니까?

사용 재렌더를 통해 전달되지 않는 문맥에 대한 업데이트가 이루어집니까?콘텍스트가 바뀌면 로그/컬러 변화가 보이지 않기 때문입니다.

콘텍스트 값에 대한 업데이트는 공급자의 모든 자녀에 대해 재렌더를 트리거하는 것이 아니라 Consumer 내에서 렌더링되는 컴포넌트만 트리거하기 때문에 Number 컴포넌트는 Consumer 내에서 렌더링 함수만 재렌더되지 않고 Conte에서 값이 변경됩니다.xt 업데이트모든 자녀에게 재렌더를 유발하지 않기 때문에 이 방법은 꽤 많은 성능을 발휘합니다.

해당 프로바이더의 모든 소비자가 업데이트되었습니까?

해당 프로바이더의 모든 소비자는 갱신 사이클을 거치지만 재렌더 여부는 리액트 가상 DOM 비교에 의해 결정됩니다.이 샌드박스의 콘솔에서 볼 수 있는 데모입니다.

편집

컴포넌트가 ContextProvider 컴포넌트의 자녀로 렌더링되고 이를 인라인으로 렌더링하여 ContextProvider 상태를 갱신하는 대신 핸들러를 전달해야 합니다.이 경우 컴포넌트 내의 모든 컴포넌트의 재렌더가 트리거되기 때문입니다.ContextProvider

퍼포먼스 사용

App.js

  constructor() {
    super();
    this.state = {
      number: Math.random() * 100,
      text: "testing context api"
      updateNumber: this.updateNumber,
    };
  }
  render() {
    return (
      <AppContext.Provider
        value={this.state}
      >
        {this.props.children}
      </AppContext.Provider>
    );
  }

index.displaces를 표시합니다.

class Data extends React.Component {
  render() {
    return (
      <div>
        <h1>Welcome to React</h1>
        <Number />
        <Text />
        <TestComp />
        <AppContext.Consumer>
          {({ updateNumber }) => (
            <button onClick={updateNumber}>Change Number </button>
          )}
        </AppContext.Consumer>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <App>
    <Data />
  </App>,
  rootElement
);

퍼포먼스 저하

App.js

class App extends Component {
  constructor() {
    super();
    this.state = {
      number: Math.random() * 100,
      text: "testing context api"
    };
  }

  updateNumber = () => {
    const randomNumber = Math.random() * 100;
    this.setState({ number: randomNumber });
  };

  render() {
    return (
      <AppContext.Provider value={this.state}>
        <div>
          <h1>Welcome to React</h1>
          <Number />
          <Text />
          <TestComp />
          <button onClick={this.updateNumber}>Change Number </button>
        </div>
      </AppContext.Provider>
    );
  }
}

다음은 Hook을 기반으로 한 질문의 업데이트입니다.

const value = useContext(MyContext)

★★★★★★★★★★★의 경우<MyContext.Provider> 업데이트이에 의해 컨텍스트의 .value으로 MyContext이 사용해도React.memo ★★★★★★★★★★★★★★★★★」shouldComponentUpdate를 사용하여 컴포넌트 자체에서 계속 렌더가 실행됩니다.

컴포넌트 호출useContext는 컨텍스트 값이 변경되면 항상 재실행됩니다.구성요소 재렌더 비용이 많이 드는 경우 메모화를 사용하여 최적화할 수 있습니다.

예시는 입니다.Number ★★★★★★★★★★★★★★★★★」Text값이 마다 재검출됩니다.는 둘 다 콘텍스트 값이 직접 되어 있기 입니다.useContext(AppContext).

const AppContext = React.createContext();

const Number = React.memo(props => {
  const renderCount = useRenderCount();
  const contextNo = React.useContext(AppContext);
  return (
    <div style={{ backgroundColor: `${randomColor()}` }}>
      Number: rendered {renderCount.current} times.
    </div>
  );
});

const Text = React.memo(() => {
  const renderCount = useRenderCount();
  const context = React.useContext(AppContext);
  return (
    <div style={{ backgroundColor: `${randomColor()}` }}>
      Text: rendered {renderCount.current} times. I rerender with context value
      changes!
    </div>
  );
});

const App = () => {
  const [ctxVal, setCtxVal] = React.useState(0);
  const [prop, setProp] = React.useState(0);
  return (
    <AppContext.Provider value={ctxVal}>
      <Number prop={prop} />
      <Text />
      <button onClick={() => setCtxVal(ctxVal + 1)}>
        Change context value
      </button>
      <button onClick={() => setProp(prop + 1)}>
        Only change prop in Number
      </button>
    </AppContext.Provider>
  );
};

function useRenderCount() {
  const renderCount = React.useRef(1);
  React.useEffect(() => {
    renderCount.current += 1;
  }); 
  return renderCount;
}

function randomColor() {
  const letters = "0123456789ABCDEF"; let color = "#";
  for (let i = 0; i < 6; i++) color += letters[Math.floor(Math.random() * 16)];
  return color;
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js" integrity="sha256-32Gmw5rBDXyMjg/73FgpukoTZdMrxuYW7tj8adbN8z4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js" integrity="sha256-bjQ42ac3EN0GqK40pC9gGi/YixvKyZ24qMP/9HiGW7w=" crossorigin="anonymous"></script>
<div id="root"></div>

언급URL : https://stackoverflow.com/questions/50817672/does-new-react-context-api-trigger-re-renders