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,在函数里面是作为一个形参传递的。