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 元素。
事件处理
- 通过 onXxxx 属性指定事件处理函数(小驼峰形式)
- 通过 event.target 可以得到发生事件的 dom 元素
- 使用 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)