标签归档:入门

【React快速学习一】基础JSX语法和生命周期

学习React也有近两年多的时间,因为一些知识点用久了容易忘记,决定找空闲时间整理下自己理解的React知识文章,顺便做一下总结!😀

什么是React

React不同于以往的JQuery+BootStrap,它是一个简单的View层框架,搭配上周边生态(Redux/Mobx/ReactRouter等),就能构建起各种逻辑复杂的系统。

我所理解的React框架具备以下特点:

1.,使用JSX语法

借助该语法,可以在JavaScript文件里混编类似HTML的代码,不仅支持原生H5标签,还可以支持用户自定义的React组件,该语法风格如下:

let Clock = () =<divthis is clock</div// 此处渲染了一个React组件
ReactDOM.render(
    <Clock/,
    document.querySelector('#root')
);

2,采用VirtualDOM优化渲染性能

浏览器内核有JS引擎和渲染引擎,每当JS手工去操作DOM树的时候,往往会引起Repaint或者Reflow,这个操作会比较耗时,从而导致页面性能不佳

于是,开源社区想出了一个VirtualDOM的解决方案。使用JavaScript来虚拟定义一个DOM树,并且更新之前会对虚拟DOM节点进行比较,React会根据比较结果,只会部分更新所需的DOM节点,减少了不必要的渲染工作

不仅React,还有Vue等框架也采用了VirtualDOM diff算法,思想都是大同小异,下面是相关代码说明

// 在React里,VirtualDOM定义的元素格式如下
{
  type: "div",
  props: null,
  children: [{type: "text", props: {textContent: "Hello"}}]