关于React三千问

React
JavaScript
发布日期:   2021-07-08
更新日期:   2021-10-04
文章字数:   1.8k
阅读时长:   7 分
阅读次数:  

如何理解React？有哪些新特性？

一、是什么

  • React，用于构建用户界面的 JavaScript 库，提供了 UI 层面的解决方案

  • 遵循组件设计模式、声明式编程范式和函数式编程概念，以使前端应用程序更高效

  • 使用虚拟DOM来有效地操作真实DOM，遵循从高阶组件到低阶组件的单向数据流

  • 帮助我们将界面分成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，构成整体页面

  • React 类组件使用一个名为 render() 的方法或者函数组件return，接收输入的数据并返回需要展示的内容

    class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById('hello-example')
);

    二、特性

    React特性有很多，如：

  • JSX语法

  • 单向数据绑定

  • 虚拟DOM

  • 声明式编程

  • Component

着重介绍下声明式编程及Component

声明式编程

  • 声明式编程是一种编程范式，它关注的是你要做什么，而不是如何做

  • 它表达逻辑而不显式地定义步骤。这意味着我们需要根据逻辑的计算来声明要显示的组件

  • 如实现一个标记的地图：

  • 通过命令式创建地图、创建标记、以及在地图上添加的标记的步骤如下：

    // 创建地图
const map = new Map.map(document.getElementById('map'), {
    zoom: 4,
    center: {lat,lng}
});

// 创建标记
const marker = new Map.marker({
    position: {lat, lng},
    title: 'Hello Marker'
});

// 地图上添加标记
marker.setMap(map);

    而用React实现上述功能则如下：

    <Map zoom={4} center={lat, lng}>
    <Marker position={lat, lng} title={'Hello Marker'}/>
</Map>

    声明式编程方式使得React组件很容易使用，最终的代码简单易于维护

Component

  • 在React 中，一切皆为组件。通常将应用程序的整个逻辑分解为小的单个部分。我们将每个单独的部分称为组件

  • 组件可以是一个函数或者是一个类，接受数据输入，处理它并返回在UI中呈现的React元素

  • 函数式组件（无状态组件）如下：

    const Header = () => {
    return(
        <Jumbotron style={{backgroundColor:'orange'}}>
            <h1>TODO App</h1>
        </Jumbotron>
    )
}

  • 类组件（有状态组件）如下：

    class Dashboard extends React.Component {
    constructor(props){
        super(props);

        this.state = {

        }
    }
    render() {
        return (
            <div className="dashboard"> 
                <ToDoForm />
                <ToDolist />
            </div>
        );
    }
}

    一个组件该有的特点如下：

  • 可组合：个组件易于和其它组件一起使用，或者嵌套在另一个组件内部

  • 可重用：每个组件都是具有独立功能的，它可以被使用在多个UI场景

  • 可维护：每个小的组件仅仅包含自身的逻辑，更容易被理解和维护

    三、优势

  • 通过上面的初步了解，可以感受到React存在的优势：

    • 高效灵活
    • 声明式的设计，简单使用
    • 组件式开发，提高代码复用率
    • 单向响应的数据流会比双向绑定的更安全，速度更快

      Real DOM 与 Virtual DOM 的区别？有何优缺点？

      一、是什么

  • Real DOM，真实DOM， 意思为文档对象模型，是一个结构化文本的抽象，在页面渲染出的每一个结点都是一个真实DOM结构，如下：

    <div id="root">
  <h1>Hello world</h1>
</div>

  • Virtual Dom，本质上是以 JavaScript 对象形式存在的对 DOM 的描述

  • 创建虚拟DOM目的就是为了更好将虚拟的节点渲染到页面视图中，虚拟DOM对象的节点与真实DOM的属性一一照应

  • 在React中，JSX是其一大特性，可以让你在JS中通过使用XML的方式去直接声明界面的DOM结构

    const vDom = <h1>Hello World</h1> // 创建h1标签，右边千万不能加引号
const root = document.getElementById('root') // 找到<div id="root"></div>节点
ReactDOM.render(vDom, root) // 把创建的h1标签渲染到root节点上

  • 上述中，ReactDOM.render()用于将你创建好的虚拟DOM节点插入到某个真实节点上，并渲染到页面上

  • JSX实际是一种语法糖，在使用过程中会被babel进行编译转化成JS代码，上述VDOM转化为如下：

    const vDom = React.createElement(
  'h1'， 
  { className: 'hClass', id: 'hId' },
  'hello world'
)

  • 可以看到，JSX就是为了简化直接调用React.createElement() 方法：

  • 第一个参数是标签名，例如h1、span、table…

  • 第二个参数是个对象，里面存着标签的一些属性，例如id、class等

  • 第三个参数是节点中的文本

  • 通过console.log(VDOM)，则能够得到虚拟VDOM消息

  • 所以可以得到，JSX通过babel的方式转化成React.createElement执行，返回值是一个对象，也就是虚拟DOM

二、区别

  • 两者的区别如下：

    • 虚拟DOM不会进行排版与重绘操作，而真实DOM会频繁重排与重绘
    • 虚拟DOM的总损耗是“虚拟DOM增删改 + 真实DOM差异增删改+排版与重绘”，真实DOM的总损耗是“真实DOM完全增删改+排版与重绘”

  • 传统的原生api或jQuery去操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程

  • 当你在一次操作时，需要更新10个DOM节点，浏览器没这么智能，收到第一个更新DOM请求后，并不知道后续还有9次更新操作，因此会马上执行流程，最终执行10次流程

  • 而通过VNode，同样更新10个DOM节点，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地的一个js对象中，最终将这个js对象一次性attach到DOM树上，避免大量的无谓计算

三、优缺点

  • 真实DOM的优势：
    • 易用
  • 缺点：
    • 效率低，解析速度慢，内存占用量过高
    • 性能差：频繁操作真实DOM，易于导致重绘与回流
  • 使用虚拟DOM的优势如下：
    • 简单方便：如果使用手动操作真实DOM来完成页面，繁琐又容易出错，在大规模应用下维护起来也很困难
    • 性能方面：使用Virtual DOM，能够有效避免真实DOM数频繁更新，减少多次引起重绘与回流，提高性能
    • 跨平台：React借助虚拟DOM， 带来了跨平台的能力，一套代码多端运行
  • 缺点：
    • 在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化
    • 首次渲染大量DOM时，由于多了一层虚拟DOM的计算，速度比正常稍慢

      React生命周期有哪些不同的阶段？每个阶段对应的方法是？

      对State 和 Porps的理解？有何区别？

      super() 和 super(props) 有何区别？

      React中的setState执行机制？

      对React的执行机制如何理解？

      React事件绑定方式有哪些？有何区别？

      React构建组件的方式有哪些？有何区别？

      React中组件通信方式有哪些？

      React中的key有什么作用？

      对React refs的理解？有何应用场景？

      对React中类组件和函数组件的理解？有何区别？

来源：JS每日一题

React
赏
  目录