【React】JSX

JSX是对JavaScript的语法拓展，使得我们可以在JS中编写像HTML一样的代码。比如：

// index.js
ReactDOM.render(<ClickCounter />, document.getElementById('root')
);

这里的<ClickCounter />就是JSX代码。

我们可以在JS代码中直接使用类似HTML的语法，但是标签又不是HTML提供的。

React判断一个元素是HTML元素还是React组件，方法是通过看首字母是否大写。

所以如果把ClickCounter改成clickCounter就会出错。

定义样式

  render() {const counterStyle = {margin: '16px'};return (<div style={ counterStyle }><button onClick={ this.onClickButton }> Click Me </button><div>Click Count: { this.state.count }</div></div>);}

React的理念

用原生的JS或者jQuery这种库，对DOM的处理步骤一般是：选中一些DOM元素然后做一些事情。

React提供的做事方式是，开发者聚焦在“我想要显示什么”，而不用去纠结“怎样做到”。

归结为一个公式就是：

UI=render(data)UI = render(data) UI=render(data)

即，用户看到的界面是一个函数的执行结果，接受数据作为参数，所以显示出来是什么样子，取决于传进来的数据是什么。

那么，开发者就需要区分出来，哪些是数据，哪些是render，更新用户界面，其实就是更新数据，界面会自然做出响应。

虚拟DOM

React是通过重复渲染来实现用户交互，界面响应变化。如果每次都重新渲染，会不会太低效？

React实现的方式是，每次更新都是重新调用render函数。

借助于虚拟DOM，React可以实现每次都只重新渲染最少的DOM元素。

总结：React是利用函数式编程的思维来解决用户界面渲染问题，强制所有组件都按照数据驱动渲染的模式工作，所以不管应用规模如何庞大，程序都在可控范围内。

参考：

《深入浅出React和Redux》

【React】JSX相关推荐

【react】JSX基本语法
1.全称 JavaScript XML 2.定义是react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, ...
【react】使用代理解决跨域问题
[react]使用代理解决跨域问题参考文章: (1)[react]使用代理解决跨域问题 (2)https://www.cnblogs.com/guanpingping/p/10344197.html ...
【react】react18的学习（三）--hooks组件
上一篇:[react]react18的学习(二)-三种组件 1.useState:使函数组件可以使用并修改 state import { useState } from 'react' const [ ...
【React】路由详解
文章目录 Router 介绍 Router 原理 Router 安装 Router 使用 Link 和 NavLink Route 属性 path 属性 exact 属性 Route 组件 compo ...
【React】react-infinite-scroll-component 实现滚动加载
react-infinite-scroll-component 实现滚动加载效果 index.tsx import {useState, useEffect} from 'react' import ...
【React】1077- React Fiber架构浅析
1.浏览器渲染为了更好的理解 React Fiber, 我们先简单了解下渲染器进程的内部工作原理. 参考资料: 从内部了解现代浏览器(3)[1] 渲染树构建.布局及绘制[2] 1.1 渲染帧帧 ( ...
【React】一路走来并持续竞走
简单整理一下React相关知识点关于react有些知识点的理解组件的三个生命周期状态:1. Mount: 插入真实DOM2. Update:被重新渲染3. Unmount:被移出真实DOM --- ...
【React】二.JSX
目录二.JSX JSX的基本使用 jsx使用步骤 JSX中使用JavaScript表达式嵌入JS表达式注意点 JSX的条件渲染问题记录 JSX的列表渲染 JSX的样式处理总结二.JSX J ...
【React】通过jsx语法创建虚拟DOM动态及数组赋值的方法（图文+代码）
jsx语法规则: 1.定义虚拟DOM时,不要写引号. 2.标签中混入JS表达式时要用{}. 3.样式的类名指定不要用class,要用className. 4.内联样式,要用style={{key:va ...

【React】JSX

定义样式

React的理念

虚拟DOM

【React】JSX相关推荐

最新文章

热门文章