Detailed explanation of the use of props in React's three major attributes

//Parent component value passing class Father extends React.PureComponent{
    render(){
        return (
            <Son value={"son"} />
        )
    }
}

class Son extends React.PureComponent{
    render(){
        return (
            <div>this data is {this.props.value}</div>
        )
    }
}

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

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

// We have already talked about passing values ​​from parent components to child components. Now let's summarize how child components pass values ​​to parent components. At this time, the parent component often needs to pass a props function to the child component first. The child component changes the value of the parent component by calling the passed function 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={"Please enter your value"} ref={(el)=>{this.inputRef = el}}/>
                <button onClick={this.changeValue}>change</button>
            </>
        )
    }
}

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 = useRef("")
        //Define a function to change the value of the fa component const changeFaValue = ()=>{
            props.changeFa(inputValue.current.value)
        }
        return (
            <>
                <input type="text" placeholder={"Please enter the value you want to change"} ref={inputValue}/>
                <button onClick={changeFaValue}>change value</button>
            </>
        )
}

//For example, for the previous input case, I need to pass a value to the brother component. If we don't use props, how should we write Bro:
export default class Bro extends Component {

    componentDidMount() {
        this.sonData = PubSub.subscribe("brother",(msg,data)=>{
            console.log("Bro Component have received 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={"Please enter your value"} ref={(el)=>{this.inputRef = el}}/>
                <button onClick={this.changeValue}>change</button>
            </>
        )
    }
}