react元素渲染

一，元素的渲染
首先我们在一个 HTML 页面中添加一个 id=“example” 的div

在此 div 中的所有内容都将由 React DOM 来管理，所以我们将其称为 “根” DOM 节点。我们用 React 开发应用时一般只会定义一个根节点。但如果你是在一个已有的项目当中引入 React 的话，你可能会需要在不同的部分单独定义 React 根节点。要将React元素渲染到根DOM节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上：实例

const element = 
Hello, world!
;
ReactDOM.render(
    element,
    document.getElementById('example')
);

二，更新元素渲染
React 元素都是不可变的。当元素被创建之后，你是无法改变其内容或属性的。目前更新界面的唯一办法是创建一个新的元素，然后将它传入 ReactDOM.render() 方法：来看一下这个计时器的例子:

function tick() {
  const element = (
    

      
Hello, world!
      
现在是 {new Date().toLocaleTimeString()}.
    
  );
  ReactDOM.render(
    element,
    document.getElementById('example')
  );
}
 
setInterval(tick, 1000);

三，实际开发中的用法

1. 使用 ES6 类写法，用 this.props.属性名 来取值。
2. 可以多层 props 来传值，在 ReactDOM.render 定义属性值，传给调用方法 App，再在调用的ES6类调用中用 props.属性直接赋值过去。

var myStyle = {color:'red',textAlign:'center'}

class Name extends React.Component {
  render() {
    return 
网站名称：{this.props.name}
;
  }
}
class Url extends React.Component {
  render() {
    return 
网站地址：{this.props.url}
;
  }
}
class Nickname extends React.Component {
  render() {
    return 
网站地址：{this.props.nickname}
;
  }
}

function App(props) {
    return (
        

            
            
            
        
    );
}
多个属性的传入注意不用逗号或分号隔开而是空格符隔开:
ReactDOM.render(
     ,
    document.getElementById('example')
);