function tick() { const element = ( <div>Now is {new Date().toLocaleTimeString()}</div> ); ReactDOM.render( element, document.getElementById('root') ); } setInterval(tick, 1000);
在实际开发中，大多数React应用只会调用一次ReactDOM.render()，所以更好的方式是使用有状态组件
组件（component）能够将UI划分为独立的、可复用的部分，这样我们就只需专注于构建每一个单独的部件。
从概念上看，组件就像是函数：接受任意的输入（称为属性，Props），返回React元素。React中有两种定义组件的方式：函数定义和类定义
1、函数定义组件
这种方式是最简单的定义组件的方式，就像写一个JS函数一样，如：
function Welcome (props) { return <h1>Hello, {props.name}</h1>;; }
2、类定义组件
还可以使用ES6里的类来定义一个组件，如下所示：
class Welcome extends React.Component { render () { return <h1>Hello, {this.props.name}<h1>; } }
这种方式比起函数定义方式则更加灵活
3、组件渲染
先前，我们遇到的React元素只是呈现一个DOM标签，如：
const element = <div />
然而，React元素也可以是用户自定义的组件，如：
const element = <Welcome />
Welcome组件中声明了一个属性name="Tom"，而这个属性，将以props.name的方式传递给组件，如下方式：
function Welcome (props) { return <h1>Hello, {props.name}</h1>; }
此时，对于以下的代码：
ReactDOM.render( <Welcome />, document.getElementById('root') )
最终就会以<h1>Hello, 张不怂</h1>的方式呈现。在这个过程中，发生了如下的事情：
对<Welcome />元素调用了ReactDOM.render()丰富
React将{ name: '张不怂' }作为props实参来调用Welcome组件
Welcome完成渲染，返回<h1>Hello, 张不怂</h1>元素
ReactDOM计算最小更新代价，然后更新DOM
4、组合组件
组件是可以组合的。即组件内部可以引用其他组件，如：
function Welcome (props) { return <h1>Hello, {props.name}</h1>; } function App () { return ( <div> <Welcome /> <Welcome /> <Welcome /> </div> ) } ReactDOM.render( <App />, document.getElementById('root') )
注意： 在React中，组件必须返回单一的根元素，这也是为什么App组件中需要用<div>标签包裹的原因。如以下的方式，是错误的（因为它有3个根元素）：
function App () { return ( <Welcome /> <Welcome /> <Welcome /> ) }
5、属性是只读的
考虑以下这种情况：
function sum (a, b) { return a + b; }
这种函数称为纯函数：它不改变自己的输入值，且总是对相同的输入返回相同的结果。
与之对立的，则是非纯函数，如：
function withdraw (account, amount) { account.total -= amount; }
非纯函数在函数内改变了输入的参数。在React中，无论是通过function还是class声明组件，我们都不应该修改它自身的属性（props）。虽然React相当灵活，但是它也有一个严格的规定：所有的React组件都必须像纯函数那样来使用它们的props
使用类定义组件有一些额外的好处，如拥有本地状态这一特性。
以下是一个类定义组件
class Clock extends React.Component { render () { return ( <div> <h1>Hello, world!</h1> <h2>Now is {this.props.date.toLocaleTimeString()}</h2> </div> ); } }
需要注意的有：
类名即为组件名（无论是函数定义组件还是类定义组件，组件名称的首字母都必须大写，并且继承自React.Component）
使用 render() 方法，用来返回需要呈现的内容
1、在类中加入state
state是属于一个组件自身的。我们可以在类的构造函数constructor中来初始化状态，如：
constructor (props) { super(props) this.state = { date: new Date() } }
如此一来，我们就可以在render()函数中使用this.state.xxx来引用一个状态
2、生命周期
在应用里，往往都会有许许多多的组件。在组件销毁后，回收和释放它们所占据的资源非常重要。