React（2）React的嵌套和组件实例

3、嵌套

被嵌套的目标可以是函数或者类，需要以大写字母开头：

函数是 return 的返回值，类是 render 函数的返回值；

示例：

// 被嵌套
function Foo() {
    return <h3>这是一个h3标签</h3>
}

// 嵌套到目标
ReactDOM.render(
    <div>
        <Foo/>
        <p>当前时间是：{formatDate(new Date())}</p>
    </div>,
    document.getElementById('root')
)

核心是函数名/类名是 Foo，所以嵌套的地方的标签名也为 Foo，并且是一个闭合标签。

类的写法：

class Foo extends React.Component {
    // 如果只是单纯的显示DOM，这里的构造函数可以省略
    constructor(props) {
        super(props)
    }

    render() {
        return <h3>这是一个h3标签</h3>
    }
}

4、组件

组件实例必须继承于 React.Component。

组件是一个完整的系统，而 React 的 DOM 元素，只是 html 片断。

// 继承于 React.Component
// 类名必须大写字母开头
class HelloWord extends React.Component {
    constructor(props) {
        // 调用 this 前必须先执行 super(props) ，理由是es6规则
        super(props);
        // 通过 state 设置组件变量
        this.state = {
            world: 'world'
        }
        // 调用方法时，方法的 this 指向组件实例（也就是没啥特别的地方）
        this.log()
    }

    // 渲染函数，this 指向实例本身
    render() {
        console.log(this)
        return <div className={domClass}>
            Hello，{this.state.world}!
        </div>
    }

    log() {
        console.log(this)
    }
}