react部分基础知识点

React特点
React是一个将数据渲染为 HTML 视图 的 js 库。

简单看来,React 框架主要功能体现在前端 UI 页面的渲染,包括性能优化以及操作简化等等方面。站在 mvc 框架的角度来看,React 操作 view 层的功能实现。

采用组件化模式、声明式编码、函数式编程,提高开发效率和组件复用性
它遵循从高阶组件到低阶组件的单向数据流。
在 React Native 中可以用 react 预发进行安卓、ios 移动端开发。
使用虚拟 dom 和 diff 算法,尽量减少与真实 dom 的交互,提高。

JSX 是 javascript 的语法扩展。它就像一个拥有 javascript 全部功能的模板语言。它生成 React 元素,这些元素将在 DOM 中呈现。React 建议在组件使用 JSX。在 JSX 中,我们结合了 javascript 和 HTML,并生成了可以在 DOM 中呈现的 react 元素。

事件处理

  1. 通过 onXxxx 属性指定事件处理函数(小驼峰形式)
  2. 通过 event.target 可以得到发生事件的 dom 元素
  3. 使用 JSX 语法时你需要传入一个函数作为事件处理函数,而不是一个字符串。

render函数
当组件的 state 或者 props 发生改变的时候,render 函数就会重新执行。

当父组件的 render 函数重新执行时,子组件的 render 函数也会重新执行。

虚拟DOM
本质上其实就是一个 object 对象;
虚拟 dom 上的属性比较少,真实 dom 属性多,因为虚拟 dom 只在 react 内部使用,用不到那么多的属性。
虚拟 dom 最终会被 react 转换成真实 dom,呈现再页面上。

挂载时:

先执行构造器(constructor)

组件将要挂载(componentWillMount)

组件挂载渲染(render)

组件挂载完成(componentDidMount)

组件销毁(componentWillUnmount)

组件内部状态更新:

组件是否应该更新(shouldComponentUpdate)

组件将要更新(componentWillUpdate)

组件更新渲染(render)

组件更新完成(componentDidUpdate)

父组件重新 render:

调用组件将要接收新 props(componentWillReceiveProps)

组件是否应该更新(shouldComponentUpdate)

组件将要更新(componentWillUpdate)

组件更新渲染(render)

组件更新完成(componentDidUpdate)

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值