本质上来说JSX是React.createElement(component, props, ...children)方法的语法糖。

所以我们如果使用了JSX,我们其实就是在使用React,所以我们就需要引入React

前言

React是前端最受欢迎的框架之一,解读其源码的文章非常多,但是我想从另一个角度去解读React:从零开始实现一个React,从API层面实现React的大部分功能,在这个过程中去探索为什么有虚拟DOM、diff、为什么setState这样设计等问题。

提起React,总是免不了和Vue做一番对比

Vue的API设计非常简洁,但是其实现方式却让人感觉是“魔法”,开发者虽然能马上上手,但其原理却很难说清楚。

相比之下React的设计哲学非常简单,虽然有很多需要自己处理的细节问题,但它没有引入任何新的概念,相对更加的干净和简单。

关于jsx

在开始之前,我们有必要搞清楚一些概念。

我们来看一下这样一段代码:

const title = <h1 className="title">Hello, world!</h1>;

这段代码并不是合法的js代码,它是一种被称为jsx的语法扩展,通过它我们就可以很方便的在js代码中书写html片段。

本质上,jsx是语法糖,上面这段代码会被babel转换成如下代码:

const title = React.createElement(
'h1',
{ className: 'title' },
'Hello, world!'
);
  

React.createElement和虚拟DOM

前文提到,jsx片段会被转译成用React.createElement方法包裹的代码。所以第一步,我们来实现这个React.createElement方法

从jsx转译结果来看,createElement方法的参数是这样:

createElement( tag, attrs, child1, child2, child3 );

第一个参数是DOM节点的标签名,它的值可能是div,h1,span等等

第二个参数是一个对象,里面包含了所有的属性,可能包含了className,id等等

从第三个参数开始,就是它的子节点

我们对createElement的实现非常简单,只需要返回一个对象来保存它的信息就行了。

function createElement( tag, attrs, ...children ) {
return {
tag,
attrs,
children
}
}
 

函数的参数 ...children使用了ES6的rest参数,它的作用是将后面child1,child2等参数合并成一个数组children。

现在我们来试试调用它

// 将上文定义的createElement方法放到对象React中
const React = {
createElement
} const element = (
<div>
hello<span>world!</span>
</div>
);
console.log( element );
  打开调试工具,我们可以看到输出的对象和我们预想的一致

我们的createElement方法返回的对象记录了这个DOM节点所有的信息,换言之,通过它我们就可以生成真正的DOM,这个记录信息的对象我们称之为虚拟DOM。

ReactDOM.render
接下来是ReactDOM.render方法,我们再来看这段代码
ReactDOM.render(
<h1>Hello, world!</h1>
document.getElementById('root')
);

  以上经过转换,这段代码变成了这样

ReactDOM.render(
React.createElement( 'h1', null, 'Hello, world!' ),
document.getElementById('root')
)
```  所以render的第一个参数实际上接受的是createElement返回的对象,也就是虚拟DOM
而第二个参数则是挂载的目标DOM 总而言之,render方法的作用就是将虚拟DOM渲染成真实的DOM,下面是它的实现:
```function setAttribute( dom, name, value ) {
// 如果属性名是className,则改回class
if ( name === 'className' ) name = 'class'; // 如果属性名是onXXX,则是一个事件监听方法
if ( /on\w+/.test( name ) ) {
name = name.toLowerCase();
dom[ name ] = value || '';
// 如果属性名是style,则更新style对象
} else if ( name === 'style' ) {
if ( !value || typeof value === 'string' ) {
dom.style.cssText = value || '';
} else if ( value && typeof value === 'object' ) {
for ( let name in value ) {
// 可以通过style={ width: 20 }这种形式来设置样式,可以省略掉单位px
dom.style[ name ] = typeof value[ name ] === 'number' ? value[ name ] + 'px' : value[ name ];
}
}
// 普通属性则直接更新属性
} else {
if ( name in dom ) {
dom[ name ] = value || '';
}
if ( value ) {
dom.setAttribute( name, value );
} else {
dom.removeAttribute( name );
}
}
}
  这里其实还有个小问题:当多次调用render函数时,不会清除原来的内容。所以我们将其附加到ReactDOM对象上时,先清除一下挂载目标DOM的内容:
const ReactDOM = {
render: ( vnode, container ) => {
container.innerHTML = '';
return render( vnode, container );
}
}

  

渲染和更新

到这里我们已经实现了React最为基础的功能,可以用它来做一些事了。

我们先在index.html中添加一个根节点

  我们先来试试官方文档中的Hello,World
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);``` 运行以后 效果基本就出来了

React 引入import React 原理的更多相关文章

  1. 为什么import React from 'react',React首字母必须大写?

    很奇怪的是,明明没有用到 React,但是我不得不 import React.这是为什么? import React from 'react'; export default function (pr ...

  2. react实战系列 —— React 中的表单和路由的原理

    其他章节请看: react实战 系列 React 中的表单和路由的原理 React 中的表单是否简单好用,受控组件和非受控是指什么? React 中的路由原理是什么,如何更好的理解 React 应用的 ...

  3. 10分钟了解 react 引入的 Hooks

    "大家好,我是谷阿莫,今天要将的是一个...",哈哈哈,看到这个题我就想到这个开头.最近react 官方在 2018 ReactConf 大会上宣布 React v16.7.0-a ...

  4. 深入理解React:事件机制原理

    目录 序言 DOM事件流 事件捕获阶段.处于目标阶段.事件冒泡阶段 addEventListener 方法 React 事件概述 事件注册 document 上注册 回调函数存储 事件分发 小结 参考 ...

  5. React Native 入门到原理(详解)

    抛砖引玉(帮你更好的去理解怎么产生的 能做什么) 砖一.动态配置 由于 AppStore 审核周期的限制,如何动态的更改 app 成为了永恒的话题.无论采用何种方式,我们的流程总是可以归结为以下三部曲 ...

  6. React动态import()

    React动态import() react-router@v4代码分离,推荐的import().这里分享webpack配置和使用方法. 首先安装两个必须的包 cnpm i react-loadable ...

  7. [React] Create and import React components with Markdown using MDXC

    In this lesson I demonstrate how to use the library MDXC to create and import React components with ...

  8. React引入,运行

    1.引入 <script src="https://cdn.bootcss.com/react/15.5.4/react.min.js"></script> ...

  9. react引入ggEditor流程图

    遇到的问题 1.propsAPI获取不到内容:withPropsAPI包裹的组件必须是GGEditor的子组件. 2.自定义组件如何使用:正确的办法是通过config配置,参照上面的代码(之前我在在内 ...

随机推荐

  1. yum 删除了,如何重新导入

    说明:准备研究docker时遇到的问题,提示如下: [root@localhost116 yum-package]# rpm -ivh yum--.el6.centos.noarch.rpm warn ...

  2. GoF的23种设计模式之行为型模式的特点和分类(2)

    行为型模式用于描述程序在运行时复杂的流程控制,即描述多个类或对象之间怎样相互协作共同完成单个对象都无法单独完成的任务,它涉及算法与对象间职责的分配. 行为型模式分为类行为模式和对象行为模式,前者采用继 ...

  3. TCP/UDP的网络底层实现

    1.1Socket的使用背景 当我们在使用微信.玩游戏.收发邮件,以及用web浏览器上网时,底层的实现是TCP/UDP的协议,封装socket实现网络通信功能. 了解了网络通信的底层实现原理,在出现s ...

  4. (8)ASP.NET Core 中的MVC路由一

    1.前言 ASP.NET Core MVC使用路由中间件来匹配传入请求的URL并将它们映射到操作(Action方法).路由在启动代码(Startup.Configure方法)或属性(Controlle ...

  5. MVC伪静态路由简单搭配

      public static void RegisterRoutes(RouteCollection routes)         {             routes.IgnoreRoute ...

  6. c# Windows服务管理

    .NET Framework中提供的类库可以很方便的实现对windows服务的安装.卸载.启动.停止.获取运行状态等功能.这些类都在System.ServiceProcess命名空间下. 所以,在开始 ...

  7. Pika 连接 rabbitmq 集群

    原文:https://blog.csdn.net/Tech_Salon/article/details/82890431 使用 Pika 连接 rabbitmq 集群使用 python 编程经常会用到 ...

  8. 【转载】UiPath,UiPath教程,UiPath视频教程 RPA

    第一课-UiPath简介 第二课-变量和数据类型第1部分-基础讲解 第二课-变量和数据类型第2部分-实例讲解 第二课-流程控制第1部分-ifelse语句讲解 第二课-流程控制第3部分-高级流程控制语句 ...

  9. 14、vue-cli脚手架搭建项目

    1:全局安装vue-cli:npm install --global vue-cli2:进入你的项目目录:cd myProject3:初始化创建项目:vue init webpack vue-demo ...

  10. Java 之 Arrays 类

    一.概述 java.util.Arrays 此类包含用来操作数组的各种方法.比如排序和搜索等,其所有方法均为静态方法,调用非常方便. 二.操作数组的方法 (1)使用二分搜索法来搜索指定的 int 型数 ...