ReactDOM.render(...) 渲染方法

React代码的书写格式和以前的JS有很大的不同，下面通过对这段代码进行分析了解一下他。

以前使用Javascript定义一个变量用var，ES6加入了const关键字，用来定义一个常量：

const div = document.createElement('div');

ReactDOM.render(...)是渲染方法，所有的js，html都可通过它进行渲染绘制，他有两个参数，内容和渲染目标js对象。

内容: 就是要在渲染目标中显示的东西，可以是一个React部件，一段HTML或TEXT文本。

渲染目标JS对象: 就是一个Div或者Tabel, 或者Td等HTML的节点对象.

ReactDOM.render(<App />,div);

unmountComponentAtNode()这个方法是解除渲染挂载,作用和render刚好相反,也就清空一个渲染目标中的React部件或html内容.

ReactDOM.unmountComponentAtNode(div);

React元素渲染实例

在HTML页面中添加一个id="example"的div

const element = <h1>Hello,world!</h1>
ReactDOM.render(
    element,
    document.getElementById('example')
)

更新元素渲染

React元素都是不可变的,当元素被创建之后,你是无法改变其内容或属性的.

目前更新界面的唯一办法就是创建一个新的元素, 然后将他传入ReactDOM.render()方法: