Intercomponent communication

In React. Js, data flows from top to bottom, meaning that a parent component can pass its state/props to its children, but the children cannot modify the props

React.js is a one-way data stream!!

1. Parent to child: The definition is directly defined on the parent level, and the child level receives it using props. For example, <child data={data}></child>, in the child component, this.props. Data can be accessed. 2. Child to parent: Define on the parent level, and the child level performs callbacks. If the function fn(a) is defined on the parent, the child can obtain the function by passing arguments to the parent. CreateContext React. CreateContext (defaultValue); createContext React. CreateContext (defaultValue); {Consumer, Provider} = createContext(defaultValue) - send data context. Provider calls the Provider in the parent component to pass data, <Provider value={{count:count, add:this.add}} > < child /> </Provider> - Receive data - Method 1:  //class.contextType = Context; ContextType = Context static contextType = Context; this.context; // Use context.consumer <Consumer> {(props)=>{console.log(props); // use context.consumer <Consumer> {(props)=>{console.log(props); return <div></div> }} </Consumer>Copy the code

setState

setState(update[,callback])

There are several points to note:

Object.assign 2. If you want to modify a parameter in this layer, use... State ={name:'xiaobai',friend:{name:'xiaohei',age:20}} const {friend} = this. State ={name:'xiaobai',friend:{name:'xiaohei',age:20}} this.setState({friend:{... Friend,age:30}}) Why asynchronous? https://www.jianshu.com/p/cc12e9a8052c the react usually have gathered together a group of components that need to update, Update object or function 5. React setState will trigger the life cycle to re-render the component 6. React does not state directly, but instead gives it a new value in setState, otherwise it will not get the original state when updatingCopy the code

The life cycle

This is not accessible on getDerivedStateFromProps!! (Because it’s static)

Summary above: Three stages

  • Mount phase mount(initialize the component to the view of the component build that is actually rendered into the DOM)

Constructor -> instantiate the component, generally initializing props and state.

Static getDerivedStateFromProps(props) -> The return value is the props to be associated with the state

Render -> build the virtual DOM

ComponentDidMount -> Check that the component is mounted

  • Update phase (the setState component starts updating until the component completes the actual DOM update)

Static getDerivedStateFromProps(props, state)-> The props and state in the child component follow updates in the parent component

ShouldComponentUpdate () -> nextProps (oldState->this. State, oldProps->this. Props); Returns a Boolean value indicating whether to update

render()

GetSnapshotBeforeUpdate (prevProps, prevState) -> Get snapshot (state is updated, but DOM is not yet updated)

ComponentDidUpdate (prevProps prevState, prevDOM) – > treatment side effects (request), prevDOM getSnapShotBeforeUpdate return values

  • UnMount phase (remove components from the real DOM)

ComponentWillUnmount -> Removes some events and information added globally

The controlled components

Controlled components and uncontrolled components

When we want to get some internal state of the form, we can bind the internal state of the form to the state of the component, thus forming a controlled component: the internal state of the form control is consistent with our state

Uncontrolled Components: We don’t need to synchronize value (defaultValue, defaultChecked)

If value is set on a normal component, it becomes a controlled component, but if onChange is not set, an error is reported and defalutValue! Is used instead.

A simple example:

class demo extends Component{
    state = {
    	val:""
    }
    
    changeVal = ({target}) = >{
    	this.setState({val:target.value});
    }
    
    render(){
    	return <input placeholder="Please type what you want to type." value={this.state.val} onChange={this.changeVal}/>}}Copy the code