React二组件进阶

代码下载

React 组件通讯

组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据。在组件化过程中，我们将一个完整的功能

拆分成多个组件，以更好的完成整个应用的功能。而在这个过程中，多个组件之间不可避免的要共享某些数据

。为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通。这个过程就是组件通讯。

组件的 props

组件是封闭的，要接收外部数据应该通过 props 来实现：

• props的作用是接收传递给组件的数据

• 传递数据通过给组件标签添加属性

• 接收数据，函数组件通过参数props接收数据，类组件通过 this.props 接收数据

  // 接收参数
  function FuncProps(props) {
  return (
  

  
  

  函数组件 props

  
  

  姓名：{props.name}，年龄：{props.age}

  
  
  
  )
  }
  // 传递参数
  ReactDOM.createRoot(document.getElementById('funcProps')).render(<FuncProps name='张三' age='18'></FuncProps>)

  class ClassProps extends React.Component {
  constructor(props) {
  super()
  console.log(props);
  }
  render() {
  return (
  

  
  

  类组件 props

  
  

  姓名：{this.props.name}，年龄：{this.props.age}

  
  
  
  )
  }
  }
  ReactDOM.createRoot(document.getElementById('classProps')).render(<ClassProps name='李四' age='19'></ClassProps>)

props 的特点：

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

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

• 使用类组件时，如果写了构造函数，应该将 props 作为构造函数的参数，并推荐将 props 传递给 super()，否则无法在构造函数中获取到 props

  class PropsParticular extends React.Component {
  constructor(props) {
  // 推荐将props传递给父类构造函数
  super(props)
  console.log(props);
  }

  changeProps = () => {
    this.props.str = 'string'
  }
  render() {
    return (
      <div>
        <h4>props 的特点</h4>
        <p>字符串：{this.props.str}，数值：{this.props.num}，对象：{JSON.stringify(this.props.obj)}</p>
        {this.props.label}
        <button onClick={this.props.func}>函数</button>
        <button onClick={this.changeProps}>修改 props</button>
      </div>
    )
  }
  

  }
  ReactDOM.createRoot(document.getElementById('propsParticular')).render(<PropsParticular
  str='我是字符串'
  num={19}
  obj={{ a: 'a', b: 'b'}}
  label={

  我是标签

  }
  func={() => alert('我是函数')}

  </PropsParticular>)

组件通讯的三种方式

1、父组件传递数据给子组件：

• 父组件提供要传递的state数据

• 给子组件标签添加属性，值为 state 中的数据

• 子组件中通过 props 接收父组件中传递的数据

  class Parent extends React.Component {
  state = {
  lastName: '张'
  }
  render() {
  return (
  

  
  

  父组件传递数据给子组件

  
  

  父组件：我姓{this.state.lastName}

  
  <Son lastName={this.state.lastName}></Son>
  
  
  )
  }
  }
  class Son extends React.Component {
  render() {
  return
  子组件：我爸爸姓{this.props.lastName}所以我姓{this.props.lastName}
  
  }
  }
  ReactDOM.createRoot(document.getElementById('parentToSon')).render(<Parent></Parent>)

2、子组件传递数据给父组件，思路是利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数：

• 父组件提供一个回调函数（用于接收数据），将该函数作为属性的值，传递给子组件

• 子组件通过 props 调用回调函数，将子组件的数据作为参数传递给回调函数

  class ParentOne extends React.Component {
  state = { sonMsg: '' }
  message = msg => {
  this.setState({ sonMsg: msg })
  console.log('state: ', this.state);
  }
  render() {
  return (
  

  
  

  子组件传递数据给父组件

  
  

  父组件：{this.state.sonMsg.length > 0 ? '我儿子在' + this.state.sonMsg : ''}

  
  <SonOne sendMsg={this.message}></SonOne>
  
  
  )
  }
  }
  class SonOne extends React.Component {
  render() {
  return (
  
  子组件：发消息
  <button onClick={() => this.props.sendMsg('打球')}>打球</button>
  <button onClick={() => this.props.sendMsg('打游戏')}>打游戏</button>
  <button onClick={() => this.props.sendMsg('写作业')}>写作业</button>
  
  
  )
  }
  }
  ReactDOM.createRoot(document.getElementById('sonToParent')).render(<ParentOne></ParentOne>)

3、兄弟组件传递数据：

将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态

• 思想：状态提升

• 公共父组件职责：1. 提供共享状态 2. 提供操作共享状态的方法

• 要通讯的子组件只需通过 props 接收状态或操作状态的方法

  class ParentTwo extends React.Component {
  state = {
  count: 0
  }
  changeCount = (value) => {
  this.setState({ count: value + this.state.count })
  }
  render() {
  return (
  

  
  

  兄弟组件传递数据

  
  <SonTwo count={this.state.count}></SonTwo>
  <SonThree changeCount={this.changeCount}></SonThree>
  
  
  )
  }
  }
  class SonTwo extends React.Component {
  render() { return

  结果：{this.props.count}

  }
  }
  class SonThree extends React.Component {
  render() { return <button onClick={() => { this.props.changeCount(1) }}>+1</button> }
  }
  ReactDOM.createRoot(document.getElementById('brotherToBrother')).render(<ParentTwo></ParentTwo>)

Context

Context 的作用是跨组件传递数据，如果出现层级比较多的情况下（例如：爷爷传递数据给孙子），会使用Context来进行传递，使用步骤如下：

• 调用 React.createContext() 创建 Provider(提供数据) 和 Consumer(消费数据) 两个组件

• 使用Provider 组件作为父节点

• 设置value属性，表示要传递的数据

• 哪一层想要接收数据，就用Consumer进行包裹，在里面回调函数中的参数就是传递过来的值

  const { Provider, Consumer } = React.createContext()
  class ContextParent extends React.Component {
  render() {
  return (
  <Provider value={{ name: '张三', age: 18 }}>
  <div style={{padding: 10, width: 200, height: 100, backgroundColor: 'red', boxSizing: 'border-box'}}>
  <ContextNode></ContextNode>
  

</Provider>
)
}
}
const ContextNode = () => {
return (
<div style={{ padding: 10, width: 180, height: 80, backgroundColor: 'green', boxSizing: 'border-box'}}>
<ContextSubNode></ContextSubNode>

)
}
const ContextSubNode = () => {
return (
<div style={{ padding: 10, width: 160, height: 60, backgroundColor: 'blue', boxSizing: 'border-box'}}>
<ContextChild></ContextChild>

)
}
const ContextChild = () => {
return (
<Consumer>
{ (data) => (<div style={{ width: 140, height: 40, backgroundColor: 'cyan'}}>{'我是' + data.name + '，' + data.age + '岁'}