<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中把字符串作为组件——保证字符串组件的称号以大写字母打头即可。

手动对组件停止重新渲染

你一定有过需求手动对组件停止重新渲染的阅历吧?比如，需求重新渲染组件的时分，手头没有任何形状或可用的物件。

假定处于某些特殊缘由，需求在点击按钮时停止此项操作，可以这么做：

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 <Card {...cardProps[type]}>Name: {name}</Card> 

        } 

想法不错——比运用if/else或 switch语法好多了。但还是有成绩。该组件每次都会重新渲染一个新创立的cardProps对象。即使没有任何改动，对一切依赖组件的重新渲染还是会发作。

运用useMemo 可以处置这一成绩：

constPokemon= ({ type, name }) => { 

          const cardProps =useMemo(() => ({ 

           fire: { primaryColor:'red', secondaryColor:'yellow' }, 

           ice: { primaryColor:'blue', secondaryColor:'white' } 

         }), []) 

          return <Card {...cardProps[type]}>Name: {name}</Card> 

        } 

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

const cardProps = { 

          fire: { primaryColor:'red', secondaryColor:'yellow' }, 

          ice: { primaryColor:'blue', secondaryColor:'white' } 

        } 

(责任编辑：admin)