這6個React技巧讓你獲得愉悅工作體驗
俗話說，熟能生巧，大多數時候筆者都在使用React工作。時間久了，一些小技巧也不請自來，它們著實讓人獲得了意外之喜。
并不是每個人都發現了這些技巧，筆者的很多同事就還沒有發現。但它們確實簡單好用，讓人心情愉悅。一起來看看吧!
以下所有例子均圍繞功能性組件(components)和鉤子(hooks)展開。
React 帶鍵的片段
有時，需要在列表內渲染多種組件。如果不需要容器，就可以使用React 片段。示例如下：
- const pokemons = ['Charizard', 'Mr. Mime', 'Jynx']
- pokemons.map(pokemon => (
- <>
- <strong>Name: </strong>
- <span>{pokemon}</span>
- </>
- ))
上述代碼沒有問題，但React會對鍵進行提示：
- Warning: Each child in a listshould have a unique "key" prop.
程序猿一般會認為這沒什么大不了，用div替換片段就好啦。
這么做當然沒有問題，但如果改可以使用帶鍵的React片段，即使用
- pokemons.map(pokemon => (
- <React.Fragmentkey={pokemon}>
- <strong>Name: </strong>
- <span>{pokemon}</span>
- </React.Fragment>
- ))
向setState傳遞函數
useState和useEffect恐怕是比較常使用的鉤子了。程序員需要向useEffect傳遞依賴項，否則就會出錯或會出現意外結果。然而，如果依賴項僅僅是和相關 setState連用的狀態，或許就無需對其進行傳遞了。
先來看個不太完美的版本：
- const [count, setCount] =useState(0)
- useEffect(() => {
- const id =setInterval(() => {
- setCount(count +1);
- }, 1000);
- return () =>clearInterval(id);
- }, [count]);
更新之后是什么樣呢：
- const [count, setCount] =useState(0)
- useEffect(() => {
- const id =setInterval(() => {
- setCount(c => c +1);
- }, 1000);
- return () =>clearInterval(id);
- }, []);
用useReducer實現useState
這是筆者在推特上發現的，盡管沒有實際作用，但可以了解 useReducer的能力。
如果直接從useReducer進行返回操作，那么它將和useState起到幾乎同樣的作用。有人可能會說使用useState沒有必要。那篇推文是這樣講的：
代碼如下，可自行拷貝嘗試：
- const [name, setName] =useReducer((_, value) => value, 'James');<input value={name} onChange={e =>setName(e.target.value)} />
將字符串值作為HTML元素
有時，程序員希望創建一個能夠成為靈活HTML元素的組件。或許讀者見過來自CSS-in-JS庫的as prop，比如emotion。
假設要創建一個能夠渲染為button或 a 的<Button> 組件，有哪些選擇呢？可以用它提取樣式，創建兩個不同的組件；也可以只創建一個組件，一起使用 React.createElement 和 as prop：
- constButton= ({ as ='button', ...props }) => React.createElement(as, props)
- <Button>A Button</Button> // Renders a button element
- <Buttonas="a">A Link</Button> // Renders an anchor element
對于簡單的組件來說，這已經很不錯了，但有沒有更好的方法呢?看看這個：：
- constButton= ({ Component ='button', ...props }) => <Component {...props} />
- <Button>A Button</Button> // Renders a button element
- <ButtonComponent="a">A Link</Button> // Renders an anchor element
沒錯，可以在JSX中把字符串作為組件——保證字符串組件的名稱以大寫字母打頭即可。
手動對組件進行重新渲染
你一定有過需要手動對組件進行重新渲染的經歷吧?比如，需要重新渲染組件的時候，手頭沒有任何狀態或可用的物件。
假設處于某些特殊原因，需要在點擊按鈕時進行此項操作，可以這么做：
- const [, rerender] =useState()rerender({})
代碼中用到了useState，但不需要狀態本身。需要的只是 setState函數或rerender 函數，以達到重新渲染的目的。Bingo!
需要注意的是，每次運行時，都需要傳遞一個新的值，比如一個空白對象或數組。
若無直接可用的prop或狀態依賴項，可將對象或函數從組件中移除
這是很常見的錯誤，首來看代碼：
- constPokemon= ({ type, name }) => {
- const cardProps = {
- fire: { primaryColor:'red', secondaryColor:'yellow' },
- ice: { primaryColor:'blue', secondaryColor:'white' }
- }
- return <Card {...cardProps[type]}>Name: {name}</Card>
- }
想法不錯——比使用if/else或 switch語法好多了。但還是有問題。該組件每次都會重新渲染一個新創建的cardProps對象。即使沒有任何改變，對所有依賴組件的重新渲染還是會發生。
使用useMemo 能夠解決這一問題：
- constPokemon= ({ type, name }) => {
- const cardProps =useMemo(() => ({
- fire: { primaryColor:'red', secondaryColor:'yellow' },
- ice: { primaryColor:'blue', secondaryColor:'white' }
- }), [])
- return <Card {...cardProps[type]}>Name: {name}</Card>
- }
但這樣做要付出代價。仔細觀察代碼就不難發現，把cardProps對象放到組件里沒有必要。所以把 useMemo 放上去也沒必要，因為對象在props或狀態上沒有直接的依賴項。即使來自外部，還是可以使用...cardProps[types]。
- const cardProps = {
- fire: { primaryColor:'red', secondaryColor:'yellow' },
- ice: { primaryColor:'blue', secondaryColor:'white' }
- }
- constPokemon= ({ type, name }) => <Card{...cardProps[type]}>Name: {name}</Card>
看到了吧，無需任何鉤子。如果不需要，就移除它們——函數也是同理。
學無止境，值得探索的東西還很多，這些技巧你學會了嘛~
