05.React组件进阶(一）

组件通讯

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

组件props

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

``` //函数组件 //2.接收数据 const Hello = (props) => { return (

props:{props.name}

) }

//1.传递数据
ReactDOM.render(,document.getElementById('root'))

//类组件
//2.接收数据
class Hello extends React.Component{
render(){
return (

props:{this.props.name}

)
}
}

//1.传递数据
ReactDOM.render(,document.getElementById('root'))

<h2>组件props特点</h2>
<p>1.可以给组件传递任意类型的数据</p>

//2.接收数据
class Hello extends React.Component{
render(){
return (

props:{this.props.age}

{this.props.tag}
{this.props.fn()}

)
}
}

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

这是一个p标签

}
/>,
document.getElementById('root'))

<p>2.props 是只读的对象，只能读取属性的值，无法修改对象</p>
<p>3.注意：使用类组件时，如果写了构造函数，应该将props传递给super(),否则，无法在构造函数中获取到props!</p>

//2.接收数据
class Hello extends React.Component{
constructor(props){
//推荐将props传递给父亲构造函数
super(props)
console.log(props)
}
render(){
return (

props:{this.props.age}

{this.props.tag}
{this.props.fn()}

)
}
}

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

这是一个p标签

}
/>,
document.getElementById('root'))

<h2>组件通讯的三种方式</h2>
<p>组件之间的通讯分为3种：</p>
<ul>
    <li>父组件->子组件</li>
    <li>子组件->父组件</li>
    <li>兄弟组件</li>
</ul>
<h4 style="color:red">父组件传递数据给子组件</h4>

//1.父组件提供要传递的state数据
//2.给子组件标签添加属性，值为state中的数据
//3.子组件中通过props接收父组件中传递的数据
//2.接收数据
//父组件
class Parent extends React.Component{
state={
lastName:'王'
}
render(){
return(

父组件

)
}
}
//子组件
const Child = (props) =>{
console.log('子组件:',props)
return(

子组件，接收到父组件的数据:{props.name}

)
}

//1.传递数据
ReactDOM.render(,document.getElementById('root'))

<h4 style="color:red">子组件传递数据给父组件</h4>

思路：利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数
//1.父组件提供一个回调函数（用于接收数据）
//2.将该函数作为属性的值，传递给子组件
//3.子组件通过props调用回调函数

//2.接收数据
//父组件
class Parent extends React.Component{
state={
parentMsg:''
}
//提供回调函数，用来接收数据
getChildMsg =(data) =>{
console.log('接收到子组件中传递过来的数据:',data)
this.setState({
parentMsg:data
})
}
render(){
return(

父组件:{this.state.parentMsg}

)
}
}
//子组件
class Child extends React.Component{
state={
msg:'刷抖音'
}

handleClick = () => {
//子组件调用父组件中传递过来的回调函数
this.props.getMsg(this.state.msg)
}
render(){
return(

子组件:点我，给父组件传递数据

)
}
}

//1.传递数据
ReactDOM.render(,document.getElementById('root'))

<h4 style="color:red">兄弟组件</h4>

将共享状态 提升到最近的公共父组件中，由公共父组件 管理这个状态
思想：状态提升
公共父组件职责：1.提供共享状态；2.提供给操作共享状态的方法
要通讯的子组件只需通过props 接收状态或操作状态的方法

//2.接收数据
//父组件
class Counter extends React.Component{
state={
count:0
}
//提供修改状态的方法
onIncrement = () =>{
this.setState({
count:this.state.count+1
})

}
render(){
    return(
    <div>
        <Child1 count={this.state.count}/>
        <Child2 onIncrement={this.onIncrement}/>
    </div>
    )
}

}
//子组件
const Child1 = props => {
return

计数器:{props.count}

}
const Child2= props => {
return +1
}

//1.传递数据
ReactDOM.render(,document.getElementById('root'))