关于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，这样就会导致组件的可维护性升高。
• 此外，第一种形式的函数组件的渲染次数会比第二种形式的函数组件的渲染次数多，因为第一种形式的函数组件在每次渲染时，都会从新创立一个新的函数，
  而第二种形式的函数组件在每次渲染时，都会应用同一个函数。