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
    评论
React学习路线图是一个指导学习React的图表,它提供了一条学习React所需的知识和技能的路径。这个路线图包括了React的基础知识和重要概念,以及一些额外的学习资源和库。你可以使用这个路线图作为学习React的指南,帮助你更好地了解React学习路径和学习顺序。如果你对React完全不了解,我建议你先阅读React的入门教程,例如React官方推荐的入门教程《React入门教程 – 概述和实际演练》和2018年学习React.js的综合指南。这些教程将介绍React的基本概念和实践,帮助你建立起对React的基本理解。之后,你可以根据React开发者线路图中的学习路径,逐步深入学习React的相关知识和技能。这个路线图将指导你学习React的核心部分和重要的知识点,以及一些额外的学习资源和库,帮助你更好地成为一名React开发人员。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [(转)2019年 React 新手学习指南 – 从 React 学习线路图说开去](https://blog.csdn.net/weixin_30544657/article/details/101470289)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值