• 组件基础
    • 定义组件
    • 使用组件

    组件基础

    相信「组件化」或者说「模块化」这些词大家都已经耳熟能详了。

    由于 JavaScript 本身没有像 Java, Python 等语言一样的模块化方案,因此在 Node.js 大一统之前,前端的世界中曾经出现过各种各样的「组件化」、「模块化」的工具 — 例如:require.js, sea.js 等。

    不过现在就完全可以使用 Node.js 中的模块机制来完成「组件化」、「模块化」的代码组织,而 React 中的组件也是基于这一机制来实现的。

    定义组件

    先来看看如何使用 ES5 或者 ES6 来编写一个 React 的组件。

    • ES5
    1. var React = require('react')
    2. var Header = React.createClass({
    3. render: function () {
    4. return <header><h1>Title</h1></header>;
    5. }
    6. })
    7. module.exports = Header;
    • ES6
    1. import React, { Component } from 'react'
    2. class Header extends Component {
    3. render () {
    4. return <header><h1>Title</h1></header>
    5. }
    6. }
    7. export default Header

    使用组件

    组件的使用与其他 Node.js 模块一致,不过在使用的时候是作为自定义标签:

    1. var React = require('react')
    2. var ReactDOM = require('react-dom')
    3. var Header = require('./Header')
    4. ReactDOM.render(
    5. <Header />,
    6. document.getElementById('app')
    7. )