這篇文章主要講解了“React容器的技巧有哪些”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“React容器的技巧有哪些”吧！

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

React 帶鍵的片段

有時(shí)，需要在列表內(nèi)渲染多種組件。如果不需要容器，就可以使用React 片段。示例如下：

const pokemons = ['Charizard', 'Mr. Mime', 'Jynx']             pokemons.map(pokemon => (              <>                <strong>Name: </strong>                <span>{pokemon}</span>              </>             ))

上述代碼沒(méi)有問(wèn)題，但React會(huì)對(duì)鍵進(jìn)行提示：

Warning: Each child in a listshould have a unique "key" prop.

程序猿一般會(huì)認(rèn)為這沒(méi)什么大不了，用div替換片段就好啦。

這么做當(dāng)然沒(méi)有問(wèn)題，但如果改可以使用帶鍵的React片段，即使用 改變語(yǔ)法，這樣一切都迎刃而解：

pokemons.map(pokemon => (                      <React.Fragmentkey={pokemon}>                        <strong>Name: </strong>                        <span>{pokemon}</span>                      </React.Fragment>                    ))

向setState傳遞函數(shù)

useState和useEffect恐怕是比較常使用的鉤子了。程序員需要向useEffect傳遞依賴項(xiàng)，否則就會(huì)出錯(cuò)或會(huì)出現(xiàn)意外結(jié)果。然而，如果依賴項(xiàng)僅僅是和相關(guān) setState連用的狀態(tài)，或許就無(wú)需對(duì)其進(jìn)行傳遞了。

先來(lái)看個(gè)不太完美的版本：

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實(shí)現(xiàn)useState

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

如果直接從useReducer進(jìn)行返回操作，那么它將和useState起到幾乎同樣的作用。有人可能會(huì)說(shuō)使用useState沒(méi)有必要。

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

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

將字符串值作為HTML元素

有時(shí)，程序員希望創(chuàng)建一個(gè)能夠成為靈活HTML元素的組件。或許讀者見(jiàn)過(guò)來(lái)自CSS-in-JS庫(kù)的as prop，比如emotion。

假設(shè)要?jiǎng)?chuàng)建一個(gè)能夠渲染為button或 a 的<Button> 組件，有哪些選擇呢？可以用它提取樣式，創(chuàng)建兩個(gè)不同的組件；也可以只創(chuàng)建一個(gè)組件，一起使用 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

對(duì)于簡(jiǎn)單的組件來(lái)說(shuō)，這已經(jīng)很不錯(cuò)了，但有沒(méi)有更好的方法呢?看看這個(gè)：：

constButton= ({ Component ='button', ...props }) => <Component {...props} />                                               <Button>A Button</Button> // Renders a button element                     <ButtonComponent="a">A Link</Button> // Renders an anchor element

沒(méi)錯(cuò)，可以在JSX中把字符串作為組件&mdash;&mdash;保證字符串組件的名稱以大寫(xiě)字母打頭即可。

手動(dòng)對(duì)組件進(jìn)行重新渲染

你一定有過(guò)需要手動(dòng)對(duì)組件進(jìn)行重新渲染的經(jīng)歷吧?比如，需要重新渲染組件的時(shí)候，手頭沒(méi)有任何狀態(tài)或可用的物件。

假設(shè)處于某些特殊原因，需要在點(diǎn)擊按鈕時(shí)進(jìn)行此項(xiàng)操作，可以這么做：

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

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

需要注意的是，每次運(yùn)行時(shí)，都需要傳遞一個(gè)新的值，比如一個(gè)空白對(duì)象或數(shù)組。

若無(wú)直接可用的prop或狀態(tài)依賴項(xiàng)，可將對(duì)象或函數(shù)從組件中移除

這是很常見(jiàn)的錯(cuò)誤，首來(lái)看代碼：

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

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

使用useMemo 能夠解決這一問(wèn)題：

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

但這樣做要付出代價(jià)。仔細(xì)觀察代碼就不難發(fā)現(xiàn)，把cardProps對(duì)象放到組件里沒(méi)有必要。所以把 useMemo 放上去也沒(méi)必要，因?yàn)閷?duì)象在props或狀態(tài)上沒(méi)有直接的依賴項(xiàng)。即使來(lá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容器的技巧有哪些”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)React容器的技巧有哪些這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

網(wǎng)頁(yè)標(biāo)題：React容器的技巧有哪些
轉(zhuǎn)載源于：http://www.chinadenli.net/article10/gpejdo.html

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

廣告

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