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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值