高效组件的设计与封装之道

const SubmitButton = (props) => {
  return <buttton>{props.buttonText}</buttton>
}

const SubmitButton = (props) => {
  return <buttton>{props.isAdd ? '新增' : '编辑'}</buttton>
}

// 对于按钮来说，按钮的文本是一个通用的特性
// 无论文本内容是什么，都不会影响按钮本身的 UI 特性
const BaseButton = (props) => {
  const { buttonText } = props;

  return <button>{buttonText}</button>
}

const SubmitButton = (props) => {
  const { buttonText, isAdd } = props;

  return <BaseButton buttonText={isAdd ? '新增' : '编辑'} />
}

const NODE_MAP = {
  start: StartNode,
  llm: LLMNode,
  end: EndNode
}

const CustomNode = (props) => {
  const { type } = props;
  const RenderNode = NODE_MAP[type];

  return <BaseNode {...props}>
    <RenderNode />
  </BaseNode>
}

const BaseNode = (props) => {
  const { children, data, ...commonProperties } = props;

  const onNodeClick = () => {
    // TODO
  };

  return cloneElement(children, { data });
}

// before
const Parent = () => {
  const [name, setName] = useState('han');
  
  return (
    <div>
      <Child name={name}></Child>
    </div>
  );
}

const Child = (props) => {
  return (
    <SubChild name={props.name}/>
  );
}

const SubChild = ({ name }) => {
  // TODO
}

// 我们注意到 Child 这个组件他只是透传了 name 字段给 SubChild，他本身并没有使用 name。
// 这在结构上会在后续扩展上造成影响，而且存在多层的情况下就会导致 参数透传地狱
// 我们如果需要进行优化，有哪几种方案呢，React 的优化说到底只有两个方案，组件层级和状态管理

// 1. 使用 Context
// 2. 使用第三方状态管理工具
// 3. 内容提升

// 前两种都是将状态提升到一个更高的纬度，是一种相对来讲绕过的方案。
// 他们也是很好的解决方案。
// 内容提升是改变组件层级来达到同样的目的。


// after
const Parent = () => {
  const [name, setName] = useState('han');
  
  return (
    <div>
      <Child>
        <SubChild name={name} />
      </Child>
    </div>
  );
}

const Child = ({ children }) => {
  return (
    {children}
  );
}

const SubChild = ({ name }) => {
  // TODO
}

// bed
const Parent = () => {
  const [state, setState] = useState({
    name: 'han',
    sex: 'man'
  });

  return (
    <div>
      <section>
      name: {name}
      </section>
      <section>
        sex: {sex}
      </section>
      <ChangeNameForm setState={setState} />
    </div>
  )
}


// good
const Parent = () => {
  const [state, setState] = useState({
    name: 'han',
    sex: 'man'
  });

  const handleChangeName = (name) => {
    setState({ ...state, name });
  }

  return (
    <div>
      <section>
      name: {name}
      </section>
      <section>
        sex: {sex}
      </section>
      <ChangeNameForm handleChangeName={handleChangeName} />
    </div>
  )
}

const Parent = (props) => {
  return <div>
    <Child name={props.name} />
    <MemoChild age={props.age} />
  </div>
}

const Child = (props) => {
  // 父组件渲染，每次都会渲染
  return <div>{props.name}</div>
}

const MemoChild = memo((props) => {
  父组件的 name 属性不变的情况下，不会重渲染
  return <div>{props.name}</div>
})

const Card = () => {
  const [otherState, setOtherState] = useState(0);
  const [outputText, setOutputText] = useState(
    "大家好，这是一个在特定场景下必须需要使用 memo 的示例，欢迎大家评论沟通想法"
  );

  return (
    <div
      onMouseLeave={() => setOtherState((pre) => ++pre)}
      style={{ background: "#ddd" }}
    >
      <OutputPanel text={outputText} />
    </div>
  );
};

const OutputPanel = (outputProps: { text: string }) => {
  return (
    <div>
      <div>{outputProps.text}</div>
      <div>唯一ID：{Math.floor(Math.random() * 100)}</div>
    </div>
  );
};