這篇文章主要講解了“React容器的技巧有哪些”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“React容器的技巧有哪些”吧！

創(chuàng)新互聯公司是一家專業(yè)從事網站設計、成都網站建設、網頁設計的品牌網絡公司。如今是成都地區(qū)具影響力的網站設計公司,作為專業(yè)的成都網站建設公司,創(chuàng)新互聯公司依托強大的技術實力、以及多年的網站運營經驗,為您提供專業(yè)的成都網站建設、營銷型網站建設及網站設計開發(fā)服務！

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連用的狀態(tài)，或許就無需對其進行傳遞了。

先來看個不太完美的版本：

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

這是筆者在推特上發(fā)現的，盡管沒有實際作用，但可以了解 useReducer的能力。

如果直接從useReducer進行返回操作，那么它將和useState起到幾乎同樣的作用。有人可能會說使用useState沒有必要。

代碼如下，可自行拷貝嘗試：

const [name, setName] =useReducer((_, value) => value, 'James');<input value={name} onChange={e =>setName(e.target.value)} />

將字符串值作為HTML元素

有時，程序員希望創(chuàng)建一個能夠成為靈活HTML元素的組件?；蛟S讀者見過來自CSS-in-JS庫的as prop，比如emotion。

假設要創(chuàng)建一個能夠渲染為button或 a 的<Button> 組件，有哪些選擇呢？可以用它提取樣式，創(chuàng)建兩個不同的組件；也可以只創(chuàng)建一個組件，一起使用 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中把字符串作為組件&mdash;&mdash;保證字符串組件的名稱以大寫字母打頭即可。

手動對組件進行重新渲染

你一定有過需要手動對組件進行重新渲染的經歷吧?比如，需要重新渲染組件的時候，手頭沒有任何狀態(tài)或可用的物件。

假設處于某些特殊原因，需要在點擊按鈕時進行此項操作，可以這么做：

const [, rerender] =useState()rerender({})

代碼中用到了useState，但不需要狀態(tài)本身。需要的只是 setState函數或rerender 函數，以達到重新渲染的目的。Bingo!

需要注意的是，每次運行時，都需要傳遞一個新的值，比如一個空白對象或數組。

若無直接可用的prop或狀態(tài)依賴項，可將對象或函數從組件中移除

這是很常見的錯誤，首來看代碼：

constPokemon= ({ type, name }) => {           const cardProps = {            fire: { primaryColor:'red', secondaryColor:'yellow' },            ice: { primaryColor:'blue', secondaryColor:'white' }          }           return <Card {...cardProps[type]}>Name: {name}</Card>         }

想法不錯&mdash;&mdash;比使用if/else或 switch語法好多了。但還是有問題。該組件每次都會重新渲染一個新創(chuàng)建的cardProps對象。即使沒有任何改變，對所有依賴組件的重新渲染還是會發(fā)生。

使用useMemo 能夠解決這一問題：

constPokemon= ({ type, name }) => {           const cardProps =useMemo(() => ({            fire: { primaryColor:'red', secondaryColor:'yellow' },            ice: { primaryColor:'blue', secondaryColor:'white' }          }), [])           return <Card {...cardProps[type]}>Name: {name}</Card>         }

但這樣做要付出代價。仔細觀察代碼就不難發(fā)現，把cardProps對象放到組件里沒有必要。所以把 useMemo 放上去也沒必要，因為對象在props或狀態(tài)上沒有直接的依賴項。即使來自外部，還是可以使用...cardProps[types]。

const cardProps = {           fire: { primaryColor:'red', secondaryColor:'yellow' },           ice: { primaryColor:'blue', secondaryColor:'white' }         }         constPokemon= ({ type, name }) => <Card{...cardProps[type]}>Name: {name}</Card>

感謝各位的閱讀，以上就是“React容器的技巧有哪些”的內容了，經過本文的學習后，相信大家對React容器的技巧有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯，小編將為大家推送更多相關知識點的文章，歡迎關注！

網頁標題：React容器的技巧有哪些
轉載源于：http://jinyejixie.com/article10/gpejdo.html

成都網站建設公司_創(chuàng)新互聯，為您提供自適應網站、企業(yè)網站制作、小程序開發(fā)、移動網站建設、網站排名、品牌網站制作

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯