JSX渲染原理

一.原理

JSX的渲染原理主要分为三部分:

1.基于babel-preset-react-app这个语法解析包,把jsx语法转换成一个名为 React.createElement() 的方法调用。

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
转换后为:
<div>
    <h1 style='color: red' className='title'>todo with react</h1>
    <ul>
      <li>a</li>
      <li>b</li>
    </ul>    
</div>
转换后为:

 2.基于createElement把传递的参数处理为jsx对象

createElement():React在渲染解析的时候,会把所有的html标签都转换为(返回一个对象):
返回对象的格式:
{
  type: 'div'   ---存储的是标签名或者组件名
  props: {    ---props: 属性对象(给当前元素设置的属性都在这里)(如果有子元素,会多一个children属性,依次把子元素传递进来,没有就没有children属性)
    style: '',
    className: '',
    children: [] 可能有可能没有,有的话:可能是一个数组,也可能是一个字符串或者是一个对象。
  },
  key: null,
  ref: null
}
例如上面的jsx语法会返回:
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }
};

3.基于render把jsx对象按照动态创建dom元素的方式插入到指定的容器中即可。

关于render函数

render(jsx,container,callback)

render(<h1>标题</h1>, document.getElementById('root'));

主要接受三个参数:
- jsx:javascript xml(html) react独有的语法;虚拟DOM(virtual dom)
- container:虚拟DOM最后渲染到的容器,不建议是body
- callback:把虚拟DOM插入到页面中,触发的回调函数(已经成为真实的DOM)

2.语法

具体实战代码

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));



App.js

import React from 'react';

function App() {
return (
    //jsx语法:允许在js代码中直接写入html标签,并且可以在html标签中写入js表达式。
    <div>
      {2 + 1},hello react
    </div>
  );
}

3.创建组件的两种方法:

1.函数式创建

function Title() {
  return (
    <div>
      <h2>新闻列表</h2>
    </div>
  );
}

2.继承component类来创建组件

import React from 'react';
class Title extends React.Component{
  constructor(props){
    super(props);
  }
  render() {
    return (
      <div>
        <h2>新闻列表</h2>
      </div>
    );
  }
}
export default Title;

调用可以采用两种方式调用:

1.单闭合调用(只能传props的值)

布尔值、Null 和 Undefined 被忽略:

falsenullundefined 和 true 都是有效的子代,但它们不会直接被渲染。

这些都是等价的

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>
<div>
  {showHeader && <Header />}  //该JSX只会在showHeader为true时渲染<Header />组件。
  <Content />
</div>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Redux 学习笔记:创建一个用 Redux 管理的 React 组件流程

    这几天看 Redux 的资料看的简直发疯,每次都看到睡着。今天下午睡了整整 4 个小时,在今晚安静的时候攻坚了一下 Redux。幸亏网上有很多靠谱的资料,不然我...

    我与梦想有个约会
  • React 项目中使用 highstocks

    highstocks 是一个功能强大且丰富的股票资讯类图表的库,其具有代表意义的项目还有 highcharts 和 highmaps。我最近在做一个股票资讯类的...

    我与梦想有个约会
  • React 学习笔记之属性 props

    React 的每一个组件都可以包含一些数据,这些数据一般情况下都是父组件传递进来的。这个过程就像我们给一个可变参数的函数传递参数一样,只不过组件内部接受到这些参...

    我与梦想有个约会
  • React 学习笔记之状态(state)和生命周期

    本文中我们同样使用 React 官方教程中的一个时钟的案例来给大家讲解 state 的作用及时生命周期中的一些接口函数。案例可能与官方不是很匹配,是因为我经过刻...

    我与梦想有个约会
  • 解决 react router 4.0.0 原地刷新页面提示 Cannot GET * 错误

    最近一直在跟着 react 官网和一些国内成熟的视频教程学习一些 react 的技巧和做一些小项目。这几天碰到一个问题就是使用 新版的 react-router...

    我与梦想有个约会
  • React 学习笔记之创建 React 项目

    在 src/index.js 中有如下代码,程序首先导入了 React 和 ReactDom 模块,并导入了一个当前目录下的 App 模块。随后在代码中使用 R...

    我与梦想有个约会
  • 在 react-router 环境下使用 antd-mobile tabbar

    本文阐述了如何在一个使用了 react-router 的 react 项目中合理的使用 antd-mobile tabbar 功能。在 antd-mobile ...

    我与梦想有个约会
  • React 学习笔记之定义组件 Component

    React 视浏览器每一个显示的项目为一个组件,组件和组件是一层和一层的调用及嵌套关系。要想在界面上显示你要显示的信息,就先要学会组件的定义。

    我与梦想有个约会
  • 使用 Fontawesome 的 React 组件

    Fontawesome 是一套图表字体库框架,我们经常在项目中用到它的各式各样的图标,本文介绍的是如何使用其 React 组件形式的包应用到项目中。

    我与梦想有个约会
  • H3C nqa 配置

      reaction 1 checked-element probe-fail threshold-type consecutive 5 action-type...

    用户2398817

扫码关注云+社区

领取腾讯云代金券