react学习日记

1.组件信息的传递， 函数组件用props，类组件在render用this.props在constructor需要在super（props）
2.组件通信的三种方式
2.1 父传子 1.父组件提供要传递的state数据
2.给子组件标签添加属性为state中的数据

//父组件
class Parent extends React.Component {
  state = {
    lastName: '王',
  }
  render() {
    return (
      <div className="parent">
        父组件：
        <Child name={this.state.lastName} />
      </div>
    )
  }
}
const Child = (props) => {
  console.log(props)
  return (
    <div className="child">
      <p>子组件，接受到父组件的数据：{props.name}</p>
    </div>
  )
}

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

//父组件
class Parent extends React.Component {
  //提供回调函数
  getChildMsg = (data) => {
    console.log('接收到子组件传过来的数据：', data)
  }
  render() {
    return (
      <div className="parent">
        父组件：
        <Child getMsg={this.getChildMsg} />
      </div>
    )
  }
}
//子组件通过props获取父组件的方法

class Child extends React.Component {
  state = {
    childMsg: 'React',
  }
  handleClick = () => {
    this.props.getMsg(this.state.childMsg)
  }
  render() {
    return (
      <div className="child">
        子组件：{' '}
        <button onClick={this.handleClick}>点我，给父组件传递数据</button>
      </div>
    )
  }
}
ReactDOM.render(<Parent />, document.getElementById('root'))

3.3 兄弟组件通信
1.将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态（状态提升）

4.Context
作用：跨组件传递数据（主题，语言等）
使用步骤
1.调用React.createContext()创建Privider（提供数据）和Consumer（消费数据）两个组件

const {Provider, Consumer} = React.createContext()

2.使用Provider组件作为父节点

<Provider>
	<div className="App">
		<Child1 />
	</div>
</Provider>

5.children 属性
1.表示组件标签的子节点。当组件标签由子节点时，props就会有该属性
2.children属性与普通的props一样，值可以是任意值