1.JSX理解
举例：
const element = <h1>Hello, world!</h1>;
这被称为 JSX，是一个 JavaScript 的语法扩展。建议在 React 中配合使用 JSX，JSX 可以生成 React “元素”，而且JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。
为什么用JSX?
React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI，以及需要在 UI 中展示准备好的数据。
React 并没有采用将标记与逻辑进行分离到不同文件这种人为地分离方式，而是通过将二者共同存放在称之为“组件”的松散耦合单元之中，来实现关注点分离。
在 JSX 中嵌入表达式
name
const name = 'Josh Perez'; const element = <h1>Hello, {name}</h1>; ReactDOM.render( element, document.getElementById('root') ); 2 + 2，user.firstNameformatName(user)
formatName(user)<h1>
function formatName(user) { return user.firstName + ' ' + user.lastName; } const user = { firstName: 'Harper', lastName: 'Perez' }; const element = ( <h1> Hello, {formatName(user)}! </h1> ); ReactDOM.render( element, document.getElementById('root') ); JSX 也是一个表达式
iffor
function getGreeting(user) { if (user) { return <h1>Hello, {formatName(user)}!</h1>; } return <h1>Hello, Stranger.</h1>; } JSX 具有特定属性
可以通过使用引号，来将属性值指定为字符串字面量：
const element = <div tabIndex="0"></div>;
也可以使用大括号，来在属性值中插入一个 JavaScript 表达式：
const element = <img src={user.avatarUrl}></img>; 在属性中嵌入 JavaScript 表达式时，不要在大括号外面加上引号。应该仅使用引号（对于字符串值）或大括号（对于表达式）中的一个，对于同一属性不能同时使用这两种符号。
注意：
camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。
classclassNametabindextabIndex。
使用 JSX 指定子元素
/>
const element = <img src={user.avatarUrl} />; JSX 标签里能够包含很多子元素:
const element = ( <div> <h1>Hello!</h1> <h2>Good to see you here.</h2> </div> );
JSX 表示对象
React.createElement()
const element = ( <h1 className="greeting"> Hello, world! </h1> );
const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' ); React.createElement()
// 注意：这是简化过的结构 const element = { type: 'h1', props: { className: 'greeting', children: 'Hello, world!' } }; 这些对象被称为 “React 元素”。它们描述了你希望在屏幕上看到的内容。React 通过读取这些对象，然后使用它们来构建 DOM 以及保持随时更新。
注意：元素是构成react应用的最小砖块。
接下来介绍将 React 元素渲染为 DOM。
2.虚拟DOM
什么是虚拟DOM?
在 React 中，render 执行的结果得到的并不是真正的 DOM 节点，结果仅仅是轻量级的 JavaScript 对象，我们称之为 virtual DOM。
虚拟 DOM 是 React 的一大亮点，具有 batching(批处理) 和高效的 Diff 算法。这让我们可以无需担心性能问题而” 毫无顾忌” 的随时“ 刷新” 整个页面，由虚拟 DOM 来确保只对界面上真正变化的部分进行实际的 DOM 操作。在实际开发中基本无需关心虚拟 DOM 是如何运作的，但是理解其运行机制不仅有助于更好的理解 React 组件的生命周期，而且对于进一步优化 React 程序也会有很大帮助。
与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。
(个人理解：虚拟DOM是由javascript构建的文档树，而真实的DOM是由HTML绘制的文档树。传统的页面发生改变时，会引起DOM页面的重绘，降低效率。而在react中，当内容发生改变时，会触发对应javascript控制的树节点对象的改变，从而控制局部页面元素的刷新。更通俗的比较就是：传统的页面渲染是内容变化触发页面DOM的整体刷新，而react则是内容变化触发javacript虚拟DOM对象改变，进而控制页面DOM局部刷新)
将一个元素渲染为 DOM
<div>：
<div id="root"></div>
其被称为“根” DOM 节点，因为该节点内的所有内容都将由 React DOM 管理。
仅使用 React 构建的应用通常只有单一的根 DOM 节点。如果你在将 React 集成进一个已有应用，那么你可以在应用中包含任意多的独立根 DOM 节点。
ReactDOM.render()：
const element = <h1>Hello, world</h1>; ReactDOM.render(element, document.getElementById('root')); 更新已渲染的元素
React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。
ReactDOM.render()。
ReactDOM.render()
React DOM 会将元素和它的子元素与它们之前的状态进行比较，并只会进行必要的更新来使 DOM 达到预期的状态。
react中文文档：https://zh-hans.reactjs.org/docs/hello-world.html
react开发者工具：https://github.com/facebook/react-devtools
react小型表单库：https://jaredpalmer.com/formik/docs/overview
javascript高阶知识:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
在线编写react练习：https://codepen.io/pen/?&editable=true
！以上是学习react可能会用到的知识文档，学习一门新技术的最好途径就是阅读官方文档+实际动手操作
来源：博客园
作者：ai镜壹
链接：https://www.cnblogs.com/zlforever-young/p/11545488.html