Introduction:

In this chapter, we’ll look at the React data flow and how it works

The data flow

In React, data flows in one direction from the top down, from parent to child components. This principle makes relationships between components simple and predictable.

State and props are the most important concepts in the React component. If the top-level component initializes props, React will traverse the entire component tree, re-attempting to render all the related child components. State, on the other hand, only cares about each component’s own internal state, which can only change within the component. Consider a component as a function, which takes props as an argument and state as an internal argument to the function, and returns a Virtual DOM implementation.

state

React manages the internal state of components. In React, these states are collectively called states.

When a component uses the library’s built-in setState method internally, the biggest behavior is that the component tries to re-render. Because you’ve changed the internal state. Such as:

import React, { Component } from 'react'; export default class Counter extends Component { constructor(props) { super(props); HandleClick = this.handleclick. bind(this); this.state = { count: 0, }; } handleClick(e) { e.preventDefault(); this.setState({ count: this.state.count + 1, }); Render () {return (<div> <p>{this.state.count}</p> <button onClick={this.handleclick}> update </button> </div>)}}Copy the code

Why bind this to the React method? React is an ES6 class, which is just a syntactic sugar (as long as it can be implemented in ES5). Objects created using class are unbound until they are instantiated using the new keyword. In other words, in the code above, if the handleClick method is not bound, the this of the method will refer to undefined

It is also worth noting that setState is an asynchronous method, and all setState methods merge operations during a lifetime.

props

Props is another important concept in React. The props for the component must come from the default properties or be passed in from the parent component. If you want to render a value of props, the easiest way is to use local variables or evaluate the result directly in JSX.

Props and participation

1. Parent component passes properties when calling child component. 2. Child component calls this.props directly. Property name to retrieve the value passed by the parent component.

import React, { Component,Fragment} from 'react'; //React props extends Component {render() {return (<Fragment> <Child aaa=" red "></Child> </Fragment> Class Child extends Component{render(){return (<div>{this.props. Aaa}</div>)}} export default App;Copy the code

Props transfer function

  1. Define a function in the parent component

Pass the function when calling the child component. 3. The child component passes this.props. Function name () to call the function and execute

import React, { Component,Fragment} from 'react'; //React props extends Component {render() {return (<Fragment> <Child aaa=" Red Cross ") {//React props extends Component {render() {return (<Fragment> <Child aaa=" Red Cross ") BBB ={this.hanshu}></Child> </Fragment>)} hanshu(){return "extends Component"; render(){ return ( <div>{this.props.aaa}{this.props.bbb()}</div> ) } } export default App;Copy the code

Props to verify

  1. Install the props – type
  2. Use two properties for validation
    • PropTypes: Used to verify the type and whether it is required
    • DefaultProps: Used to set the default value when no parameter is passed
import React, { Component, Fragment } from 'react'; import PropTypes from 'prop-types'; Export default class App extends Component {render() {return (<Fragment> <Child aaa=" /> </Fragment>)}  } class Child extends Component { render() { return ( <div> <div>{this.props.aaa}</div> <div>{this.props.bbb}</div> <div>{this.props. CCC}</div> <div>{this.props. DDD}</div> </div>)} PropTypes = {aaa: propTypes. Number, BBB: {aaa: propTypes. Number, BBB: PropTypes isRequired, CCC: PropTypes. String. IsRequired} Child. DefaultProps = {DDD: "default"}Copy the code

Explanation:

  1. The AAA type is passed in as string and expected to be number
  2. BBB needs to be passed in

Failure to verify will result in an error, but it does not actually affect the normal display of our page

So let’s look at another way of writing it

Write validation inside the class using the static attribute

import React, { Component,Fragment } from 'react'; import PropTypes from 'prop-types'; Export default class App extends Component {render() {return (<Fragment> <Child aaa=" c "CCC =" c "/> </Fragment>)} } class Child extends Component { static propTypes = { aaa: PropTypes.number, bbb: PropTypes.string.isRequired, ccc: PropTypes.string.isRequired } static defaultProps = { ddd: "Default"} render () {return (< div > < div > {this. Props. Aaa} < / div > < div > {this. Props. BBB} < / div > < div > {this. Props. CCC} < / div > <div>{this.props.ddd}</div> </div> ) } }Copy the code