React-children prop子组件渲染

避免子组件不必要的render

Demo1-直接使用Son组件

import { useId, useState } from 'react';
import { createRoot } from 'react-dom/client';

const Son = () => {
  console.log('render son');
  return <div>son div</div>;
};

const Parent = () => {
  console.log('render parent');
  const [, forUpdate] = useState<string>('');
  return (
    <>
      <button onClick={() => forUpdate(useId())}></button>
      <Son />
    </>
  );
};

const App = () => {
  return <Parent />;
};

document.addEventListener('DOMContentLoaded', () => {
  const root = createRoot(document.getElementById('app') as HTMLElement);
  root.render(<App />);
});

Demo2 -- props引入组件

import { useId, useState } from 'react';
import { createRoot } from 'react-dom/client';

const Son = () => {
  console.log('render son');
  return <div>son div</div>;
};

const Parent = ({ children }) => {
  console.log('render parent');
  const [, forUpdate] = useState<string>('');
  return (
    <>
      <button onClick={() => forUpdate(useId())}></button>
      {children}
    </>
  );
};

const App = () => {
  return (
    <Parent>
      <Son />
    </Parent>
  );
};

document.addEventListener('DOMContentLoaded', () => {
  const root = createRoot(document.getElementById('app') as HTMLElement);
  root.render(<App />);
});

通过简单的两个Demo，看出优化的方向；通过children prop 优化子组件渲染