React:Element

React Elements 是构成React App的最小单位。React中的组件是由一个或多个Elements构成的。

和DOM不同,React Elements 是纯粹的JS对象。利用React生成的DOM会根据React elements的数据变化实时更新。

1.RE挂载到DOM节点:

1 const element = <h1>Hello, world</h1>;
2 ReactDOM.render(
3   element,
4   document.getElementById(‘root‘)
5 );

只要调用ReactDOM.render即可,#root节点中的DOM内容将由element搭建.

2.RE生成后是不可改动的。

一旦生成,RE的子元素和特性将不可改变。此时如果要改变UI,只能重新创建一个RE,并传入ReactDOM.render中。不过文档指出,生产中大多数React Apps的UI组份只调用一次render方法即可。

3.React DOM只会更新有变化的的部分。当element发生改变后,React DOM会将它与上一个Element的内容进行比较,只有变化了的部分会发生更新,不变的部分不动,从而将渲染的开销降低。

时间: 2024-11-06 02:37:49

React:Element的相关文章

React中使用Ant Table组件

一.Ant Design of React http://ant.design/docs/react/introduce 二.建立webpack工程 webpack+react demo下载 项目的启动,参考 三.简单配置 1.工程下载下来之后,在src目录下新建目录“table”,新建app.js,内容如下. import React from 'react'; import ReactDOM from 'react-dom'; import ExampleTable from './Exam

[React] Use React.cloneElement to Modify and Add Additional Properties to React Children

In this lesson we'll show how to use React.cloneElement to add additional properties to the children of a React element. We'll also show that you can add additional properties not declared on the element.

React render return 空行问题

Uncaught Invariant Violation: App.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object. 原本: 然后改成这样: 就会报这样的错误 解决办法 :    1--还像之前那样   2-- 就是在这之前加上 () 解决的 度娘出来的     http://stac

react学习笔记-06

1.在调用setState之后发生了什么? 在代码调用setState之后,React会将传入的参数对象与组件当前状态合并,然后触发调和过程.在调和过程中,react会以相对搞高效的方式根据新的状态构建DOM树,在构建DOM的时候,react会比较新的DOM树和老的DON树的节点差异,然后根据差异对界面进行最小化重渲染.在Diff 算法中,React能够精确的知道哪些位置发生了改变以及该如何改变,这就保证了按需更新,而不是全部更新. 2.React中element与compoent的区别 Rea

React组件属性类型(propTypes)

React.createClass({ propTypes: { // You can declare that a prop is a specific JS primitive. By default, these // are all optional. optionalArray: React.PropTypes.array, optionalBool: React.PropTypes.bool, optionalFunc: React.PropTypes.func, optionalN

React:JSX

React的一个特色/核心机制是通过创建虚拟DOM,减少对实际DOM的操作,从而提高页面性能. JSX其实是把XML语法加入到JS中,我们可以用JSX来构建界面,然后JSX由转换器转换成纯JS,在浏览器中执行.在React的文档中,很直接地告诉我们JSX只是JS的一个语法拓展而已. 1.基础语法: 1 ReactDOM.render( 2 <h1>Hello, world!</h1>, 3 document.getElementById('root') 4 ); ReactDOM.

React:Refs and DOM

React的哲学是在JS层面构建UI,并把UI组件以功能单位拆分成更小的组件单元,以利于复用和整合,父组件通过props作为操作子组件的唯一通道,甚至子组件想和父组件交互时,也只能依靠父组件通过props传递下来的方法(该方法在父组件内定义,子组件只是拿到它的引用).在文档中,称这种模式属于dataflow,即把程序分成多个块,每个块相对独立,并有各自的处理逻辑. 在React中,考虑到有些场景通过直接获取元素的引用会更方便简洁,于是提供了Ref这个接口.Ref可以帮我们获取React Elem

react属性说明

React.PropTypes声明了一系列的数据类型和校验规则: React.createClass({ propTypes: { // You can declare that a prop is a specific JS primitive. By default, these // are all optional. optionalArray: React.PropTypes.array, optionalBool: React.PropTypes.bool, optionalFunc

React:Conditional Rendering(条件渲染)

就像JS中常常会根据条件(比如if/else.switch)返回不同的值,React中也可以根据组件的状态或其他参考条件返回不同的React Element. 比如根据用户是否登陆渲染对应的UI面板. 1 class LoginControl extends React.Component { 2 constructor(props) { 3 super(props); 4 this.handleLoginClick = this.handleLoginClick.bind(this); 5 t