react后续

组件之间的通信

父传子

父组件通过 属性=值 的形式来传递给子组件数据；

        <Mainbanner banners={banners}/>
        <Mainproductlist productlist={productlist}/>

子组件通过 props 参数获取父组件传递过来的数据；

const{banners}=this.props
    return (
      <div className='banner'>
        <ul>
          {
            banners.map(item=>{
              return <li key={item.acm}>{item.title}</li>
            })
          }
        </ul>
      </div>
    )

propTypes

导入

import propTypes from 'prop-types'
Mainbanner.propTypes={
  banners:propTypes.array.isRequired
}

子传父

在React中同样是通过props传递消息，只是让父组件给子组件传递一个回调函数，在子组件中调用这个函数即可

<Addcounter addclick={(count)=>{this.changecount(count)}}></Addcounter>
addCount=(count)=>{
    this.props.addclick(count)
   }
  render() {
    return (
      <div>
        <button onClick={e=>this.props.addclick(1)}>+1</button>
        <button onClick={e=>this.addCount(5)}>+5</button>
        <button onClick={e=>this.addCount(10)}>+10</button>
        <button onClick={e=>this.addCount(-1)}>-1</button>
        <button onClick={e=>this.addCount(-5)}>-5</button>
        <button onClick={e=>this.addCount(-10)}>-10</button>
      </div>
    )
  }

 

非父子组件context

React.createContext

创建一个需要共享的Context对象：如果一个组件订阅了Context，那么这个组件会从离自身最近的那个匹配的 Provider 中读取到当前的context值；defaultValue是组件在顶层查找过程中没有找到对应的Provider，那么就使用默认值

 

Context.Provider

每个 Context 对象都会返回一个 Provider React 组件，它允许消费组件订阅 context 的变化：Provider 接收一个 value 属性，传递给消费组件；一个 Provider 可以和多个消费组件有对应关系；多个 Provider 也可以嵌套使用，里层的会覆盖外层的数据；当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染

 

 

Class.contextType

挂载在 class 上的 contextType 属性会被重赋值为一个由 React.createContext() 创建的 Context 对象：这能让你使用 this.context 来消费最近 Context 上的那个值；你可以在任何生命周期中访问到它，包括 render 函数中；

 

Context.Provider

每个 Context 对象都会返回一个 Provider React 组件，它允许消费组件订阅 context 的变化：Provider 接收一个 value 属性，传递给消费组件；一个 Provider 可以和多个消费组件有对应关系；多个 Provider 也可以嵌套使用，里层的会覆盖外层的数据；当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染；

 

setstate

为什么使用setstate

因为我们修改了state之后，希望React根据最新的State来重新渲染界面，但是这种方式的修改React并不知道数据发生了变化；React并没有实现类似于Vue2中的Object.defineProperty或者Vue3中的Proxy的方式来监听数据的变化；我们必须通过setState来告知React数据已经发生了变化；

PureComponent

如果所有的类，我们都需要手动来实现 shouldComponentUpdate，那么会给我们开发者增加非常多的工作量。

 我们来设想一下shouldComponentUpdate中的各种判断的目的是什么？

 props或者state中的数据是否发生了改变，来决定shouldComponentUpdate返回true或者false；

◼ 事实上React已经考虑到了这一点，所以React已经默认帮我们实现好了，如何实现呢？

 将class继承自PureComponent。