React第一期知识点总结(简陋版)

vue和react的区别

• react是单项数据流而vue是双向绑定
• react可以在改变数据后，然后做劫持判断他渲染不渲染，而vue不行
• 修改数据vue是使用this.xxx，而react是this.setData{(xxx: this.state.xxx)}进行修改

安装react脚手架

• npm install create-react-app -g 是全局
• create-react-app 项目名
• npm run start启动项目

类组件

类组件必须使用class语法编写，必须要继承react.component类，类名必须全局唯一

函数组件

方法名全局唯一，让函数变成函数组件，直接在函数里面return

类组件和函数组件的区别

1、类组件有生命周期，函数组件没有
2、类组件需要继承 Class，函数组件不需要
3、类组件可以获取实例化的 this，并且基于 this 做各种操作，函数组件不行
4、类组件内部可以定义并维护 state， 函数组件都称为无状态了，那肯定不行。

什么是jsx语法

既不是html也不是字符串，是一个js的语法扩展，具有js的全部功能

react中如何编写样式

内联样式、创建css文件、css modules处理样式污染问题
安装sass， 使用scss文件来编写样式之后引入

react中如何定义事件

采用小驼峰命名，需要传一个函数作为事件处理函数，而不是字符串，存在this指向问题，一般使用bind或箭头函数绑定事件

state

主要租用是用于组件保存、控制以及修改自己的状态，组件的私有属性，只能通过组件内部的setState来修改。

渲染列表，key的作用

一般使用map方法渲染列表，key的作用：是用来追踪那些列表的元素被修改，开发过程中需要保证某个元素的key在统计元素中具有唯一性，在react的diff算法中会判断是不是新生成的，减少不必要的元素渲染。不建议使用index作为key值。整个列表都需要重新渲染

react组件通讯(传值)

父传子

• 在父组件中调用子组件的位置添加自定义属性，属性的值就是要传输的数据，在子组件里面使用props接收

子传父

• 在父组件调用子组件的位置添加自定义方法，在子组件对应的事件里面触发接收到的方法，并且可以传参。本质就是通过观察者触发了一个回调函数

组件传值

• 组件标签中间如果有其他组件或者标签，则在组件内使用this.props.children展示

状态提升

概念：

• 在React框架中，当多个组件需要反映相同的变化数据，这时建议将共享状态提升到最近的共同父组件中去。

ReactDOM.createPortal是什么

• protal提供了一种将子节点渲染到存在于父组件以外的DOM节点的方案。改变了组件的挂载方式，不在是挂载到上层父节点上，而是可以让用户指定一个挂载节点。一般用于模态对话框，弹出框，工具提示等。。。
• 在css中我们可以使用position：fixed等定位方式，让元素从视觉上脱离父元素。
• 用法：ReactDOM.createPortal(child,container)
• 第一个参数是html
• 第二个参数是要挂载的一个元素

生命周期

声明周期

• 挂载
• 更新
• 卸载

挂载阶段

• constructor()
• render
• static getDerivedStareFromProps
• componentDidMount
• componentWillFromMount(废弃前面加unsafe)

更新

• shouldComponentUpdate
• getSnapshotBeforeUpdata
• componetDidUpdate
• componentWillUpdate(废弃)
• componentWillReceiveProps(废弃)

卸载

• componentWillUnmount

react Fiber架构

• Fiber是一个基于优先级策略和帧间回调的循环任务调度算法的架构方案核心思想就是 任务拆分和协同，主动把执行权交给主线程，石柱县城有时间空挡处理其他高优先级任务

上下文Context

• 在组件数中共享数据，而不是通过每个级别显示地传递参数，祖先传值
• 特点：跨级传递数据

使用方法

• 先创建一个名字为MyContext 的Context对象
• 后面每个组件都在嵌套
• 前要共享数据的组件里面使用MyContext里面的provider属性，把要传值的组件包裹起来使用属性传值，这样子组件就可以拿到祖辈中的数据，在祖辈中使用value的属性传值
• 在要接收数据的组件中声明一个静态属性，赋值为MyContext，
• 如果要在组件中使用，可以直接使用this.context拿到共享出来的数据
• (使用MyContext.Consumer消费组件)
• 使用MyContext.Consumer的方法包裹，在方法里面放一个花括号，花括号中放一个回调函数，这个回调函数接收一个context接收到provider下发的数据，这个方法必须有return，returnt就是我们的jsx代码

useState方法

• userState是一个方法

• 接收一个参数

• 这个可以任意数据类型

• useState有返回值

• 返回一个数组

• 数组的第一项是当前状态的值，默认就是初始值

• 数组的第二项就是改变这个数组的方法

• 调用useState方法，并传入一个参数，拿到他的返回值

• useState的基本实现原理是：链表+闭包

• 是根据顺序返回最新的值，除非组件销毁否则不会被初始化

• react hooks组件的渲染，是函数的自调用，也就是每次组件重新渲染的时候，当前函数都会调用一次

• 注意：在hooks组件里面尽量不要单独定义相关变量值，可能会被初始化

useEffect方法

• 第一个参数是回调函数

• 第二个参数是依赖项是一个数组

• 依赖项发生变化的时候，第一个回调函数才会触发

• 并且初始化的时候也会触发

• 依赖项可以存放 useState 里面的状态，或者props等

• 如果第二个参数不传，每次渲染后都会触发这个方法

• 其实useEffect就是监听了某个state或者props的变化

• 那么每次创建都会创建一个监听，所以useEffect在底层

• 实现了一个先卸载后监听的效果

• 也就是说，当我们使用useEffect的时候，源码会先观察一下

• 当前有没有监听，如果有则先卸载后监听，没有则直接监听

• 并且卸载的时候还给我们暴露了一个回调函数

• 在useEffect里面直接return一个方法

• 那么这个方法就在这个监听的卸载阶段触发