react app work111

Page 1

React 和核心库1231

• React 和 React-DOM 的作用

  • React: 核心类库，用于构建用户界面。11

  • React-DOM: 处理与DOM相关的操作。

类组件与虚拟DOM

• React 中类组件继承的类:

  • 继承自 React.Component。

• 创建虚拟DOM的方法:

  • React.createElement(标签名，标签上的属性，子节点)。

• 虚拟DOM的本质:

  • 本质上是一个JS对象，描述视图结构。轻（属性少）于真实DOM（维护的属性多）。最终转换为真实DOM以提升性能。

组件生命周期

• React 17中新增的生命周期:

  • getDerivedStateFromProps、getSnapshotBeforeUpdate。

项目初始化

• 初始化命令:

  • create-react-app 项目名。

• React框架默认端口号:

  • 3000。

render 方法作用

• 将虚拟DOM转为真实DOM并渲染到页面上。

状态更新

• 为什么不能直接更新state:

  • 需要调用 setState，以触发React更新的生命周期函数。

props

• 主要作用:

  • 进行父子组件间传值和通信。

• 修改方式:

  • 在父组件中修改。

• props 和 state 区别:

  • props 不能在当前组件修改，而 state 可以。

  • state 在组件内定义，props 为父组件传递的。

Page 2

状态和props管理

• 改变状态与props的方法:

  • 使用 setState 改变状态，在父组件中改变props。

  • props 传递给组件（类似函数参数），而 state 是内部管理的（类似函数变量）。

组件使用场景

• 类组件与函数组件的使用场景:

  • 交互逻辑复杂时用类组件；只展示视图时使用函数组件。

• 区别:

  • 类组件有状态（state）和生命周期函数，函数组件没有。

  • 类组件创建了实例，函数组件可以直接调用，效率更高。

  • 函数组件不需要绑定 this，而类组件中 this 指向组件实例。

父组件传递数据

• 获取父组件传递的数据方式:

  • 函数组件: props.name

  • 类组件: this.props.name

Page 3

shouldComponentUpdate

• 返回值的作用:

  • 控制组件是否更新，支持性能优化。

  • true 更新组件，false 不更新。

• 强制更新 API:

  • this.forceUpdate()。

• 阻止渲染:

  • 通过 shouldComponentUpdate 返回 false 来阻止组件渲染。

组件优化

• 高性能组件与普通组件的区别:

  • 高性能组件继承自 PureComponent，普通组件 shouldComponentUpdate 默认返回真。

• React 中优化手段:

  • 类组件使用 shouldComponentUpdate 或 PureComponent；函数组件使用 React.memo，useMemo，useCallback。

Ref的创建方式

• 三种创建方式:

  • 字符串方式 ref="list"、API方式 React.createRef()、回调函数方式 ref={(el) => this.inputRef = el}。

• 组件中Ref的创建:

  • 函数组件没有 this，通常使用 React.createRef()。

  • 类组件使用上面三种方式。

Page 4

状态提升

• 定义:

  • 将多个平行组件或跨级组件需要共享的数据提升到共同的父组件中管理。

setState的写法

• 两种写法及区别:

  • 对象式: setState({},() => {})

  • 函数式: setState((state,props) => { return {};},() => {})（函数式传递 props 和 state 参数）。

cloneElement 方法

• 参数及作用:

  • 第一个参数: 克隆虚拟DOM。

  • 第二个参数: 配置当前 element的属性，合并克隆的元素属性。

  • 第三个参数: 配置当前 element的 children，可以覆盖之克隆的元素的 children。

生命周期的三个阶段

• 挂载阶段:

  • constructor、componentWillMount、render、componentDidMount。

• 更新阶段:

  • componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate。

• 卸载阶段:

  • componentWillUnmount。

Page 5

组件之间通信

• 三种方式:

  • 父传子、子传父、跨级传参。

  • 父传子: 使用自定义属性，将参数传递给子组件。

  • 子传父: 子组件通过 props 传递一个修改状态的方法给父组件。

  • 跨级传参: 使用上下文传参（Context）和 React.createContext()。

改变 this 指向

• 三种方法:

  • bind 方法

  • 箭头函数

  • 在构造函数中绑定。

Page 6

JSX

• 定义:

  • JSX是React.createElement的语法糖，不被浏览器直接支持，需编译。

• 语法规范:

  • 使用 className 代替 class。

  • 循环列表需要加上 key，内联样式使用对象形式。

key的作用

• 作用:

  • 提高虚拟DOM更新的效率，避免不必要的渲染。

• 不建议使用索引:

  • 会导致数据顺序破坏，影响性能。

合成事件

• 定义:

  • React模拟原生DOM事件的对象，具有更好的兼容性。

事件处理区别

• React 元素事件与 DOM 元素事件区别:

  • 使用合成事件进行封装。

  • 事件委托给 document，统一处理。

  • 事件命名遵循小驼峰。

  • 事件在冒泡阶段，通过命名带上 Capture 变为捕获阶段。

Page 7

旧的生命周期钩子函数

• 被废弃的函数:

  • componentWillMount、componentWillReceiveProps、componentWillUpdate。

实例期生命周期钩子函数

• 含义与作用:

  • constructor: 创建实例，初始化state，修改 this 指向。

  • componentWillMount: 组件挂载前执行，不建议进行DOM操作。

  • render: 渲染虚拟DOM。

  • componentDidMount: 组件挂载后执行，可进行初始化。

Page 8

存在期生命周期钩子函数

• 含义与作用:

  • componentWillReceiveProps: 将要接收父组件传递过来的props。

  • shouldComponentUpdate: 控制组件是否更新。

  • componentWillUpdate: 组件更新前执行。

Page 9

生命周期钩子函数触发

• state、props、forceUpdate的触发:

  • state 改变时触发更新相关函数。

  • props 变化通过父组件改变，触发更新。

  • forceUpdate 直接触发相关生命周期。

Page 10

新的生命周期钩子函数

• 函数:

  • getDerivedStateFromProps：this指向undefined，替代 componentWillMount 和 componentWillReceiveProps。

  • getSnapshotBeforeUpdate的场景: 更新前获取DOM信息。

受控组件

• 定义:

  • 表单元素的值与state状态绑定。

React的特点

• 特点:

  • 声明式设计、高效、灵活、支持JSX。

  • 无需双向数据绑定，数据流向清晰可控。

Page 11

Vue与React的区别

• 模型:

  • React 基于MVC，Vue 基于MVVM。

• 数据绑定:

  • Vue的 v-model 实现双向数据绑定，React 手动实现。

MVVM与MVC

• 定义:

  • MVVM: Model-View-ViewModel；MVC: Model-View-Controller。

  • MVVM 提供双向绑定，MVC 主要管理业务逻辑。

单向数据流

• 定义与优点:

  • 数据从外层组件向内层传递，减少错误。

Page 12

渲染富文本

• 方法:

  • 使用 dangerouslySetInnerHTML={{__html: XX}}。

实现Vue计算属性

• 示例:

  • 通过getter和setter式的state来实现。