俗话说，熟能生巧，我大部分时间都在使用React。时间一长，一些小动作不请自来，着实让人大吃一惊。不是每个人都发现了这些技术，我的许多同事也没有。但它们真的很好用，让人心情愉快。让我们来看看！以下所有示例都围绕功能组件和挂钩展开。Reactkeyedfragments有时需要在列表中渲染多个组件。如果不需要容器，可以使用React片段。这是一个例子：constpokemons=['Charizard','Mr.Mime','Jynx']pokemons.map(pokemon=>(<Name:{pokemon}))上面的代码没有问题，但是React会提示输入密钥：Warning:E??achchildinalistsshouldhaveaunique"key"prop。程序员一般认为这没什么大不了的，把fragment换成div就行了。这样做当然没有问题，但是如果你可以使用带键的React片段，你可以改变语法，所以一切都会解决：pokemons.map(pokemon=>(Name:{pokemon}))将函数useState和useEffect传递给setState可能是比较常用的hook。程序员需要将依赖传递给useEffect，否则会出现错误或者出现意想不到的结果。但是，如果依赖项只是与关联的setState一起使用的状态，则可能没有必要传递它。先来看一个不太完美的版本：const[count,setCount]=useState(0)useEffect(()=>{constid=setInterval(()=>{setCount(count+1);},1000);return()=>clearInterval(id);},[count]);更新后是什么样子：const[count,setCount]=useState(0)useEffect(()=>{constid=setInterval(()=>{setCount(c=>c+1);},1000);return()=>clearInterval(id);},[]);使用useReducer实现useState这是笔者在推特上找到的，虽然没有实际作用，但是可以了解useReducer的能力。如果直接从useReducer返回，它的作用几乎和useState一样。可能有人会说用useState没必要。那条tweet是这样的：代码如下，大家可以自己复制试试：const[name,setName]=useReducer((_,value)=>value,'James');setName(e.target.value)}/>字符串值作为HTML元素有时程序员希望创建一个可以是灵活HTML元素的组件。也许读者已经看到了来自CSS-in-JS库的道具，比如情感。假设你想创建一个可以呈现为按钮或的//Rendersanchorelement对于简单的组件来说已经很不错了，但是有没有更好的How？看这个::constButton=({Component='button',...props})=>//RendersabuttonelementALink//Rendersanchorelement是的，你可以在JSX中使用字符串作为组件——只要确保字符串组件的名称以大写字母开头即可。手动重新渲染组件你一定有过手动重新渲染组件的经历吧？例如，当需要重新渲染组件时，手边没有状态或可用对象。假设由于某些特殊原因，需要在点击按钮时执行这个操作，可以这样做：const[,rerender]=useState()rerender({})代码中使用了useState，但是state本身不需要。只需要setState函数或者rerender函数就可以实现重新渲染。请注意，宾果游戏！每次运行都需要传递一个新的值，比如空白对象或数组。如果没有直接可用的道具或状态依赖项，则可以从组件中删除对象或函数。这是一个很常见的错误。先看代码：constPokemon=({type,name})=>{constcardProps={fire:{primaryColor:'red',secondaryColor:'yellow'},ice:{primaryColor:'blue',secondaryColor:'white'}}returnName:{name}}是个好主意——比使用if/else或switch语法要好得多。但仍然存在问题。该组件每次都会重新渲染一个新创建的cardProps对象。即使没有任何改变，所有依赖组件的重新渲染也会发生。使用useMemo可以解决这个问题：constPokemon=({type,name})=>{constcardProps=useMemo(()=>({fire:{primaryColor:'red',secondaryColor:'yellow'},ice:{primaryColor:'blue',secondaryColor:'white'}}),[])returnName:{name}}但这样做是有代价的。仔细看代码，不难发现，将cardProps对象放在组件中是没有必要的。所以把useMemo放在那里也是不必要的，因为这个对象对props或state没有直接的依赖。即使在外部，...cardProps[types]仍然可以使用。constcardProps={fire:{primaryColor:'red',secondaryColor:'yellow'},ice:{primaryColor:'blue',secondaryColor:'white'}}constPokemon=({type,name})=>Name:{name}看吧，不需要任何钩子。如果不需要它们，请将其删除-功能也是如此。学无止境，还有很多值得探索的东西。这些技能你学会了吗~
