React学习

React学习笔记（四）

该学习笔记源于B站视频https://www.bilibili.com/video/av69359910/?p=2&t=397
1、creatContext是react提供的一个用于跨组件传值的方法，creatContext这个方法的结果是一个对象，里面有两个组件:Provider和Consumer，Provider用于提供状态，Cosumer用于接收状态。Provider需要封装，因为直接使用不方便管理状态。Cosumer的children必须是一个方法，这个方法的参数是Provider的value。

2、HOC：高阶组件
一个组件里面返回了一个组件，就称之为高阶组件。


高阶组件渲染组件的时候，为了不覆盖组件在调用的时候要传递的参数，需要传递到子组件中去。

3、react-app-rewired：在不使用’eject’且未创建react-scripts分支的情况下，调整create-react-app webpack配置。可以在安装react-app-rewired的基础下使用customize-cra。

让cra支持@装饰器写法：
1、不管你是要配置什么，我们最好的方式是使用react-app-rewired在这个包来对cra创建的项目进行轻微的配置调整。
2、安装好之后，在package.json里把react-scripts替换成react-app-rewired
3、在根目录下创建一个config-overrides.js

module.exports=(config)=>{
  //在这里做配置
  return config
}

4、当然如果想要配置更方便，可以在安装custon=mize-cra，然后把config-overrides.js改成这样

const {override,addDecratorsLegacy}=require('customize-cra')
module.exports=(config)=>{
  //在这里做配置
   addDecratorsLegacy()
}

react社区化，vue官方化

PS:state、props、context
this.state：组件状态
this.props：组件接受的参数
this.context：组件接受的上下文
state
state只能在组件的constructor中初始化，只能使用setState方法进行更新，setState会导致render重新执行，渲染组件和子组件，父组件更新会带动子组件更新，子组件更新不会。
props
1、组件中的props：this.props.title和this.props.children
2、一般放到JSX中占位
3、constructor中继承props:在构造函数需要用到this.props的时候
在类里面用this，在函数里面是作为一个形参传递的。