[react系列]react起步

121 阅读2分钟

react官网

react是什么

用来构建UI的JavaScript库

起源

facebook,对市场上js MVC框架不满意,自己开发的用于Instagram网站建设,于2013年5月开源。

react 出发点

基于HTML的前端界面越来越复杂,react致力于解决如何将来自服务器或者用户输入的动态数据高效的反映到复杂的用户界面上。(用于开发数据不断变化的大型应用程序,相较传统前端开发,react实现高效率)

react 与传统MVC关系

react不是一个完整的MVC框架,最多可以认为是mvc中的V(view)

react 高性能体现

  • 虚拟Dom(Virtual DOM)
    • 虚拟dom是真实dom在内存中的表示。UI的表示形式保存在内存中,并与实际的Dom同步。是一个发生在render函数被调用和元素在屏幕显示之间对的步骤,整个过程被称为调和。
  • diff算法 (虚拟DOM的加速器)
    • 数据变化,react重构整个Dom树,将当前的dom和上次的dom对比,仅将需要变化的部分进行实际的浏览器dom更新。

state

  • 不能直接修改state
  • React 可能会把多个 setState() 调用合并成一个调用,state更新可能是异步 setState()接收一个函数,这个函数用上一个 state 作为第一个参数,将此次更新被应用时的 props 做为第二个参数:
    this.setState((state, props) => ({
        counter: state.counter + props.increment
    }));
  • state的更新会被合并,合并是浅合并。

高阶组件

高阶组件(HOC)是接受一个组件并返回一个新组件的函数。基本上,这是一个模式,是从 React 的组合特性中衍生出来的,称其为纯组件,因为它们可以接受任何动态提供的子组件,但不会修改或复制输入组件中的任何行为 HOC 可以用于以下许多用例

  • 代码重用、逻辑和引导抽象
  • 渲染劫持
  • state 抽象和操作
  • props 处理