并不是每团体都发现了这些技巧，笔者的很多同事就还没有发现。但它们确实复杂好用，让人心境愉悦。一同来看看吧!

以下一切例子均围绕功用性组件(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) 

(责任编辑：admin)