前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JSX渲染原理

JSX渲染原理

作者头像
柴小智
发布2020-01-15 17:57:48
1.3K0
发布2020-01-15 17:57:48
举报
文章被收录于专栏:菜鸟计划

一.原理

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

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

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

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

代码语言:javascript
复制
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函数

代码语言:javascript
复制
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.语法

具体实战代码

代码语言:javascript
复制
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.函数式创建

代码语言:javascript
复制
function Title() {
  return (
    <div>
      <h2>新闻列表</h2>
    </div>
  );
}

2.继承component类来创建组件

代码语言:javascript
复制
import React from 'react';
class Title extends React.Component{
  constructor(props){
    super(props);
  }
  render() {
    return (
      <div>
        <h2>新闻列表</h2>
      </div>
    );
  }
}
export default Title;

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

代码语言:javascript
复制
1.单闭合调用(只能传props的值)

布尔值、Null 和 Undefined 被忽略:

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

代码语言:javascript
复制
这些都是等价的

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>
代码语言:javascript
复制
<div>
  {showHeader && <Header />}  //该JSX只会在showHeader为true时渲染<Header />组件。
  <Content />
</div>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-01-07 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档