函数式组件

  • 定义一个函数，命名时首字母大写，其返回一个VDOM 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        function Demo () {
        	console.log(this)	// 此处 this 为 undefined，因为 babel 在翻译时，使用了严格模式
            return <h1>Demo</h1>
        }
        ReactDOM.render(<Demo/>, document.getElementById('app'))
        // 1. React 解析组件标签，发现 <Demo/> 组件
        // 2. 发现该组件是函数式组件
        // 3. 调用该函数，获取 VDOM
        // 4. 将 VDOM 转换为真实DOM，并渲染到页面中
    </script>
</body>
</html>

类式组件

  • 定义一个类，类名首字母大写，且继承自React.Component，包含render方法，且返回VDOM 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        class Demo extends React.Component {
            render () {
            	console.log(this)	// 此处 this 为类的实例
                return <h1>Demo</h1>
            }
        }
        ReactDOM.render(<Demo/>, document.getElementById('app'))
        // 1. React 解析组件标签，发现 <Demo/> 组件
        // 2. 发现该组件是类式组件，通过 new 获得该类的实例
        // 3. 调用该类的 render 方法，获取 VDOM
        // 4. 将 VDOM 转换为真实DOM，并渲染到页面中
    </script>
</body>
</html>