React 特性

• 数据

  • 数据驱动

    在React中，一切皆数据。要想改变界面元素，或者更改dom结节，只需要修改数据就好了。

    切记：在React中不要操作Dom节点。

  • state

    React的数据，所有的数据都用state来管理。

    分为组件state和全局state.

  • 单向数据流

    数据只能从state流向dom，不能逆向更改。

• 程序

  • 声明式（函数式）

    纯函数：函数的输出不受外部环境影响，同时也不影响外部环境。例如：

      [1, 2, 3].map(index => index + 1);
    

    非纯函数：输入相同，输出不同的函数。例如：

      Math.random();
    

    函数的柯里化：将一个低阶函数转换为高阶函数的过程。例如：

      (arg1, arg2, arg3) => arg1 => arg2 => arg3;
    

    

  • 组件化的

    把数据组织起来的表现形式。

      () => ('我是一个组件');
    

  • JSX语法

    在javascript中可以编辑html片段。

      () => <div>我也是一个组件</div>
    

  • 客户端和服务端渲然

    把代码拉取到客户端，再编译执行的方式就是客户端渲然。这种方式是无法支持SEO的，所有就有了服务端渲然，在服务端提前渲然成静态html页面。

    第三方服务端渲然库：next.js

• 性能

  • 虚拟节点

    将dom抽象成一个javascript对象，例如：

    const element = {
      element: 'ul',
      props: { id:"ulist" },
      children: [
        { element: 'li', props: { id:"first" }, children: ['这是第一个List元素'] },
        { element: 'li', props: { id:"second" }, children: ['这是第二个List元素'] }
      ]
    }
    

  • diff

    将虚拟dom转化为真实dom的算法。分为三级：tree diff, component diff, element diff.