Shulou(Shulou.com)06/02 Report--

This article mainly explains "what are the skills of React container". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the skills of React container".

React fragments with bonds

Sometimes you need to render multiple components in the list. If you don't need a container, you can use React fragments. Examples are as follows:

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

The above code is fine, but React prompts for the key:

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

Programmers generally think it's no big deal, just replace the fragments with div.

There's no problem with this, of course, but if you change it, you can use React fragments with keys, even if you change the syntax, and everything will work out:

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

Transfer function to setState

UseState and useEffect are probably the more commonly used hooks. Programmers need to pass dependencies to useEffect, or else errors or unexpected results will occur. However, if the dependency is only the state used in conjunction with the related setState, it may not be necessary to pass it on.

Let's start with an imperfect version:

Const [count, setCount] = useState (0) useEffect (() = > {const id = setInterval (()) = > {setCount (count + 1);}, 1000); return () = > clearInterval (id);}, [count])

What does it look like after the update:

Const [count, setCount] = useState (0) useEffect () = > {const id = setInterval (()) = > {setCount (c = > c + 1);}, 1000); return () = > clearInterval (id);}, [])

Using useReducer to realize useState

This is what the author found on Twitter, although it has no practical effect, but you can understand the capabilities of useReducer.

If you do the return operation directly from useReducer, it will have almost the same effect as useState. Some might say that using useState is not necessary.

The code is as follows, you can copy it and try:

Const [name, setName] = useReducer ((_, value) = > value, 'James'); setName (e.target.value)} / >

Use a string value as a HTML element

Sometimes programmers want to create a component that can become a flexible HTML element. Perhaps the reader has seen as prop from the CSS-in-JS library, such as emotion.

Suppose you want to create a component that can be rendered as button or a, what are the options? You can use it to extract styles and create two different components, or you can create just one component, using React.createElement and as prop together:

ConstButton= ({as = 'button',... props}) = > React.createElement (as, props) A Button / / Renders a button element A Link / / Renders an anchor element

This is fine for simple components, but is there a better way? Look at this::

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

Yes, you can use a string as a component in JSX-- just make sure the name of the string component begins with an uppercase letter.

Manually re-render the component

You must have had the experience of re-rendering the components manually, right? For example, when you need to re-render a component, you don't have any state or available objects on hand.

If you need to do this when the button is clicked for some special reason, you can do this:

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

UseState is used in the code, but the state itself is not required. All you need is the setState function or the rerender function for re-rendering. Bingo!

It is important to note that each time you run, you need to pass a new value, such as a blank object or array.

If no prop or state dependencies are directly available, you can remove the object or function from the component

This is a common error. First, look at the code:

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

That's a good idea-- much better than using if/else or switch syntax. But there's still a problem. This component renders a newly created cardProps object each time. Even if there is no change, re-rendering of all dependent components will occur.

Using useMemo can solve this problem:

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

But there is a price to pay. If you look closely at the code, it is not difficult to see that it is not necessary to put cardProps objects in the component. So it's not necessary to put useMemo on it, because objects don't have direct dependencies on props or state. Even from outside, you can still use... cardProps [types].

Const cardProps = {fire: {primaryColor:'red', secondaryColor:'yellow'}, ice: {primaryColor:'blue', secondaryColor:'white'}} constPokemon= ({type, name}) = > Name: {name} Thank you for your reading. These are the contents of "what are the skills of React containers". After the study of this article, I believe that you have a deeper understanding of the skills of the React container, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.