React components

React assembly

Custom components

1、We can use functions to define a component:FunctionHelloMessage(props) {
    return <h1>Hello World!</h1>;
}

You can also use it.ES6 class To define a component:class Welcome extends React.Component {
  render() {
    return <h1>Hello World!</h1>;
  }
}

2.const element = <HelloMessage /> User defined components.Attention, nativeHTML The element name begins with a lowercase letter and is customized.React The class name begins with capitals, for example.HelloMessage It can't be written as helloMessage. In addition, we need to notice that the component class can only contain a top-level tag, otherwise it will also report errors.If we need to pass parameters to components, we can use them.this.props object* note that when adding attributes,class Attributes need to be written.className ，for Attributes need to be written.htmlFor ，that is becauseclass andfor yesJavaScript Reserved words.

Composite component

By creating multiple components to synthesize a component, we separate the different functional points of the component.

React State(State)

React Think of components as a state machine (State Machines). By interacting with the user, different states are implemented, and then the UI is rendered to keep the user interface and data consistent.

Adding the lifecycle method to classes

When Clock When a component is first loaded into the DOM, we all want to generate a timer, which is called a mount in React.When Clock When the generated DOM is removed, we also want to clear the timer, which is called unloading in React.

Life cycle function

componentDidMount()The lifecycle function triggered by the completion of the element = = = mounted in = Vue/ / modificationstateThe only wayThis.setState() Modifying the data@param data to be modifiedCallback function after @parma is modifiedThis.setState({
        index:this.state.index + 1
    },()=>{
    console.log(this.state.index)
        
    })

componentDidMount() The componentWillUnmount () method is called life cycle hook.The componentDidMount () hook is executed after the component is exported to the DOM, and we can set a timer on that hook.ThiS.timerID is the calculator's ID. We can unmount the calculator in the componentWillUnmount () hook.

Data top-down flow

State is often referred to as partial or encapsulation.Called top-down or one-way data streams

React Props

state The main difference between props and props is that it is immutable.state It can be changed according to user interaction. This is why some container components need to be defined.state To update and modify data. Subcomponents can only pass data through props.1.Through component classesdefaultProps Property sets default values for props2.Props Verify the use of propTypes

This direction of events

call And apply change the direction of this.(different transfer parameters)Bind only changes this pointing and will not execute.() => {} function call + executionbind(this) Returns a function called only.Call ()Execution points at the declaration.E.target Dom for triggering eventsE.currentTarget Dom for binding events

Event

Prevent default behavior of eventse.preventDefault()

Component data transfer

Father => sonPropsSon => father1.Parent componentAn event is defined on the child component of the parent component.<List  listItem={this.listItem.bind(this)}></List>
    
    listItem(res){
        console.log(res)
    }
    
2.Subcomponent< P onClick={() =>this.props.listItem(Passed data):}> < /p>