Shulou(Shulou.com)05/31 Report--

This article mainly explains "what matters need to be paid attention to when using the react framework", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let the editor take you to learn what you need to pay attention to when using the react framework.

Is 1.setState synchronous or asynchronous?

Class MyComponent extends React.Component {constructor (props) {super (props) this.state = {value:0}} handleClick = () = > {this.setState ({value:1}) console.log ('output in handleClick + this.state.value);} render () {console.log (' output in render () + this.state.value); return (button)} export default MyComponent// omits the rendering process, as follows

When we click the button here, we call the handleClick function, first call this.setState () to set the value, and then output the this.state.value. What is the result?

You might think, it's not easy-- "output 1 in handleClick", but you're wrong, and the result is:

In fact, the call to setState () is asynchronous, which means that although you call setState ({value:0}), this.state.value does not immediately become zero, but setState () is not actually executed until the render () function is called. Combined with the figure, let's explain:

You might ask again: what if I call this.setState () several times before render () to change the same value? (such as value)

We make some changes to handleClick to make it a little more complicated. When we call handleClick, we call handleStateChange1 and handleStateChange2,handleStateChange3 in turn. They call setState to set the value to 1m, 2jue, and print immediately.

HandleStateChange1 = () = > {this.setState ({value:1}) console.log ('output in handleClick' + this.state.value);} handleStateChange2 = () = > {this.setState ({value:2}) console.log ('output in handleClick + this.state.value);} handleStateChange3 = () = > {this.setState ({value:3}) console.log (' output in handleClick'+ this.state.value);} handleClick = () = > {this.handleStateChange1 () This.handleStateChange2 (); this.handleStateChange3 ();}

So what will the output be? If the setState is called synchronously, the result is obviously

Output 1 in handleClick

Output 2 in handleClick

Output 3 in handleClick

But the result is: it turns out it's asynchronous.

This is easy to understand, with this picture:

two。 How do you change the state of the parent component in the child component?

This is one of the problems we often encounter. The solution is to write a method in the parent component that can change the state of the parent component and pass it into the child component through props.

Class Son extends React.Component {render () {return ({this.props.value})} class Father extends React.Component {constructor (props) {super (props) this.state = {value:'a'}} handleClick = () = > {this.setState ({value:'b'})} render () {return ()}}

Click the child component Son, and the content changes from a to b, indicating that the state of the parent component has been modified.

The use of 3.context to avoid "props transmission hell"

3.1 suppose an extreme scenario: what if you need to call the properties or methods of the parent component from your child components! When the level of component nesting is too deep, constantly passing props as an implementation is a nightmare! I call it "props transitive hell" (I made up the word, refer to it from "callback function hell")

What we need to do next is to pass the gene attribute (gene) from the component GrandFather-- > Father-- > Son, if passed with props:

Class Son extends React.Component {render () {return (I got the gene from my grandfather-- {this.props.gene})} class Father extends React.Component {render () {return ()}} class GrandFather extends React.Component {constructor (props) {super (props) this.state = {gene:' [Grandpa's gene]'}} render () {return ()}}

Demo:

The implementation is implemented, but if you think about it, suppose it is not from the "Grandpa" component, but from the "Grandpa" component, how terrible it is! But it doesn't matter, react provides an API called context (context), and the properties you define in the context of the top-level component can be used in all descendant components through this.context. Property to reference! Let's take a look at it:

Class Son extends React.Component {render () {console.log (this.context.color) Return (I got the gene from my grandfather-- {this.context.gene})} Son.contextTypes = {gene:React.PropTypes.string} class Father extends React.Component {render () {return ()}} class GrandFather extends React.Component {getChildContext () {return {gene:' [Grandpa's gene]'}} render () {return ()} GrandFather.childContextTypes = {gene:React.PropTypes.string}; export default GrandFather

Demo effect is the same as above! At this time, you find that we do not pass props down in the component and the component, so we get the gene property from the lowest Son component, isn't it very convenient!

Explain the code:

GetChildContext () is the hook function you define in the top-level component, and this function returns an object-- the property you want to access in the descendant component is placed in this object. For example, in this case, I want to get the property through this.context.gene in the Son component, so I return {gene:' [Grandpa's gene]'} in getChildContext ().

GrandFather.childContextTypes and Son.contextTypes are used to specify the attribute types of the top-level component and the descendant of the top-level component context

[note] GrandFather.childContextTypes and Son.contextTypes must be specified! Otherwise, context can only get an empty object!

The difference between context and props with pictures and truths

Is 3.2context recommended?

Although the above example illustrates how useful context is, note: it is not officially recommended to use it often because it can make your application architecture unstable (If you want your application to be stable, don't use context). In my opinion, why do you use props instead of implementing data flow in most cases, because props relies on the close logical relationship between components? So that you can clearly track the application data flow (it's easy to track the flow of data through your React components with props), of course, if you encounter the case of the above example, context is still very helpful

3.3 when you need to change a property in context, don't change it directly, but use this.state as a medium. If you try to put a mutable attribute in the state of the top-level component, you can do this:

GetChildContext () {return {type:this.state.type}}

3.4 when I restricted the type of gene above, I wrote: gene: React.PropTypes.string, using the built-in React.PropTypes help attribute of React. At this time, my version is "react": "15.4.2". After version 15.5, this help attribute is discarded, and it is recommended to use the props-types library, like this:

Const PropTypes = require ("Prop-Types"); GrandFather.childContextTypes = {gene: PropTypes.string}

Of course, you need npm install prop-types before that.

4. There is a private variable an in the component class. Will it be placed in the this.an or in the this.state object (as a property)?

It depends on whether it needs real-time re-rendering. If the variable needs to be synchronized into the changed UI, you should put it in the this.state object, and if not, put it in the this (no code, no demo)

At this point, I believe you have a deeper understanding of "what you need to pay attention to when using the react framework". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.