05.React组件进阶

组件通讯

组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据
在组件化过程中，我们将一个完整的功能拆分成多个组件，以更好的完成整个应用的功能
在这个过程中，多个组件之间不可避免的要共享某些数据，为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通，这个过程就是组件通讯

组件props

组件是封闭的，要接收外部数据应该通过props来实现
props的作用：接收传递给组件的数据
传递数据：给组件标签添加属性
接收数据：函数组件通过参数props接收数据，类组件通过 this.props 接收数据

//函数组件
//2.接收数据
const Hello = (props) => {
    return (
        <div>
            <h1>props:{props.name}</h1>
        </div>
    )
}
  


//1.传递数据
ReactDOM.render(<Hello name="jack" age={19}/>,document.getElementById('root'))

//类组件
//2.接收数据 
class Hello extends React.Component{
    render(){
        return (
            <div>
                <h1>props:{this.props.name}</h1>
            </div>
        )
    }
}

//1.传递数据
ReactDOM.render(<Hello name="jack" age={19}/>,document.getElementById('root'))

组件props特点

1.可以给组件传递任意类型的数据

//2.接收数据 
class Hello extends React.Component{
    render(){
        return (
            <div>
                <h1>props:{this.props.age}</h1>
                {this.props.tag}
                {this.props.fn()}
            </div>
        )
    }
}

//1.传递数据
ReactDOM.render(
    <Hello name="jack" 
    age={19}
    colors={['red','green','blue']}
    fn={() => console.log('这是一个函数')}
    tag={<p>这是一个p标签</p>}
    />,
document.getElementById('root'))

2.props 是只读的对象，只能读取属性的值，无法修改对象

3.注意：使用类组件时，如果写了构造函数，应该将props传递给super(),否则，无法在构造函数中获取到props!

//2.接收数据 
class Hello extends React.Component{
    constructor(props){
        //推荐将props传递给父亲构造函数
        super(props)
        console.log(props)
    }
    render(){
        return (
            <div>
                <h1>props:{this.props.age}</h1>
                {this.props.tag}
                {this.props.fn()}
            </div>
        )
    }
}

//1.传递数据
ReactDOM.render(
    <Hello name="jack" 
    age={19}
    colors={['red','green','blue']}
    fn={() => console.log('这是一个函数')}
    tag={<p>这是一个p标签</p>}
    />,
document.getElementById('root'))

组件通讯

组件props

组件props特点

猜你喜欢