关于react.js:React-Tips-更优雅的处理多个值之间的切换

背景：

此时，一个组件外部的state取值为"response" | 'header', 然而在组件外部，咱们须要依据state的值来切换不同的组件，这时候就须要用到type切换了。

实现思路：

• 第一种实现

  function App() {  const [type, setType] = useState<"respones" | "header">('response');  return (      <div>          <button onClick={() => setType('response')}>response</button>          <button onClick={() => setType('header')}>header</button>          {type === 'response' ? <Response /> : <Header />}      </div>  )}

• 第二种实现

  function App() {  const [type, setType] = useState<"respones" | "header">('response');    const handleTypeChange = (e) => {      setType(e.currentTarget.dataset.key);  }    return (      <div>          {[{              name: 'response',          }, {              name: 'header',          }].map((item) => {              return <button key={item.name} data-key={item.name} onClick={handleTypeChange}>{item.name}</button>          })}          {type === 'response' ? <Response /> : <Header />}      </div>  )}

总结：

• 下面的两种形式都能够实现咱们的目标。然而第二种形式的实现更加的灵便，因为咱们能够通过循环的形式来实现，而不是写死的两个button。
• 第一种形式的实现，如果咱们须要增加一个新的type，那么咱们就须要在组件外部增加一个新的button，这样就会导致组件的可维护性升高。
• 此外，第一种形式的函数组件的渲染次数会比第二种形式的函数组件的渲染次数多，因为第一种形式的函数组件在每次渲染时，都会从新创立一个新的函数，
  而第二种形式的函数组件在每次渲染时，都会应用同一个函数。