Last time we talked about state. Now let’s talk about props. Functions are used to communicate between components (parent and child components).

Class components

PureComponent{render(){return (<Son value={" Son "} />)}} class extends Father extends react. PureComponent{render(){return (<Son value={" Son "} />)} React.PureComponent{ render(){ return ( <div>this data is {this.props.value}</div> ) } }Copy the code

Function component

function Fa(){
    return (
        <Son value={"son"} />
    )
}

function Son(props){
    return (
        <div>this data is {props.value}</div>
    )
}
Copy the code

In a function component, props only needs to pass a value, which is handy

When the React element is a user-defined component, it converts attributes and children received by JSX into a single object passed to the component, which is called “props.”

So, we can get the values uploaded by the parent component through props, and we can get the JSX child component directly through props. Children

The props is read-only

React notes in the document

All React components must protect their props from being changed like pure functions.

The concept of pure functions has been explained in Redux. In short, we cannot change the values of props.

Intercomponent communication

Now to summarize component communication:

  • Props first of all, the previous class component is written:
// The parent component passes props to the child component; // The parent component passes props to the child component. Export Default Class Fa extends Component {state = {faValue:'Fa1'} changeFa = (value)=>{ this.setState(()=>{ return {faValue:value} }) } render() { return ( <> <h1>Fa's value is {this.state.faValue}</h1> <Son changeFa={this.changeFa}/> </> ) } } export default class Son extends React.PureComponent{ changeValue = ()=>{ This.props. ChangeFa (this.inputref.value)} render() {return (<> <input type="text" placeholder={" placeholder "} ref={(el)=>{this.inputRef = el}}/> <button onClick={this.changeValue}>change</button> </> ) } }Copy the code

Then write a function component like this:

function Fa(){ const [faValue,setFaValue] = useState("Fa1") const changeFa = (value)=>{ setFaValue(value) } return ( <div> <h1>Fa's value is {faValue}</h1> <Son changeFa={changeFa} /> </div> ) } function Son(props){ const inputValue = Const changeFaValue = ()=>{props. ChangeFa (inputValue.current.value)} return (<> <input) } ref={inputValue}/> < onClick={changeFaValue}>change value</button> </>)}Copy the code
  • Eventbus (subscription-publish mechanism)

This can be interpreted as a weakened redux. So here we’re going to use the library pubsub-js. It is written as follows:

// For example, I need to pass a value to the sibling component. If I don't need to say props, how do I say Bro: export default class Bro extends Component { componentDidMount() { this.sonData = PubSub.subscribe("brother",(msg,data)=>{ console.log("Bro Component have recived the msg",data); }) } componentWillUnmount() { PubSub.unsubscribe(this.sonData) } render() { return ( <> <div>brother</div> </> ) } } Son: export default class Son extends React.PureComponent{ changeValue = ()=>{ PubSub.publish("brother",this.inputRef.value) } render() {return (<> <input type="text" placeholder={" placeholder "} ref={(el)=>{this.inputref = el}}/> <button onClick={this.changeValue}>change</button> </> ) } }Copy the code

The first API subscribes, publishes the corresponding event, and defines what the event should do. The second is publish, which subscribes to the publishing thing and passes in the corresponding value to change. The third one is unsubscribe, which is used to cancel publishing things, to do memory optimization

  • Redux and we’ll talk more about that later