React容器的技巧有哪些

这篇文章主要讲解了“React容器的技巧有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“React容器的技巧有哪些”吧！

创新互联公司是一家专业从事网站设计、成都网站建设、网页设计的品牌网络公司。如今是成都地区具影响力的网站设计公司,作为专业的成都网站建设公司,创新互联公司依托强大的技术实力、以及多年的网站运营经验,为您提供专业的成都网站建设、营销型网站建设及网站设计开发服务！

React 带键的片段

有时，需要在列表内渲染多种组件。如果不需要容器，就可以使用React 片段。示例如下：

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

上述代码没有问题，但React会对键进行提示：

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

程序猿一般会认为这没什么大不了，用div替换片段就好啦。

这么做当然没有问题，但如果改可以使用带键的React片段，即使用 改变语法，这样一切都迎刃而解：

pokemons.map(pokemon => (                                              Name:                         {pokemon}                                          ))

向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');setName(e.target.value)} />

将字符串值作为HTML元素

有时，程序员希望创建一个能够成为灵活HTML元素的组件。或许读者见过来自CSS-in-JS库的as prop，比如emotion。

假设要创建一个能够渲染为button或 a 的 组件，有哪些选择呢？可以用它提取样式，创建两个不同的组件；也可以只创建一个组件，一起使用 React.createElement 和 as prop：

constButton= ({ as ='button', ...props }) => React.createElement(as, props)                                                    

A Button // Renders a button element                       A Link // Renders an anchor element

对于简单的组件来说，这已经很不错了，但有没有更好的方法呢?看看这个：：

constButton= ({ Component ='button', ...props }) =>                                                A Button // Renders a button element                     A Link // 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 Name: {name}         }

想法不错——比使用if/else或 switch语法好多了。但还是有问题。该组件每次都会重新渲染一个新创建的cardProps对象。即使没有任何改变，对所有依赖组件的重新渲染还是会发生。

使用useMemo 能够解决这一问题：

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

但这样做要付出代价。仔细观察代码就不难发现，把cardProps对象放到组件里没有必要。所以把 useMemo 放上去也没必要，因为对象在props或状态上没有直接的依赖项。即使来自外部，还是可以使用...cardProps[types]。

const cardProps = {           fire: { primaryColor:'red', secondaryColor:'yellow' },           ice: { primaryColor:'blue', secondaryColor:'white' }         }         constPokemon= ({ type, name }) => Name: {name}

感谢各位的阅读，以上就是“React容器的技巧有哪些”的内容了，经过本文的学习后，相信大家对React容器的技巧有哪些这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！