初识 React (一) 之创建组件的两种方式

一、创建一个最基本的 React

<!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>React</title>
</head>
<body>
    <div id="app"></div>

    // 1. 引入 react 核心库
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    // 2. 引入 react-dom 核心库，用于操作 DOM
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    // 3. 引入 babel，将 jsx 转换为 js
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

    <script type="text/babel">
        const VNODE= <h1>hello, react!</h1>

        ReactDOM.render(VNODE,document.getElementById('app')) // ReactDOM.render(虚拟节点，容器)
    </script>
</body>
</html>

二、React 创建组件的两种方式

1、函数组件 -- (简单组件)

该函数是一个有效的 React 组件，因为它接收唯一带有数据的 “props”（代表属性）对象与并返回一个 React 元素。这类组件被称为“函数组件”，因为它本质上就是 JavaScript 函数。

    <div id="app"></div>

    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

    <script type="text/babel">
        function Welcome(props) {
            return <h1>Hello, {props.name}!</h1>;
        }

        ReactDOM.render(<Welcome name="word"/>,document.getElementById('app'))
    </script>

2、 class组件 -- (复杂组件)

创建一个 class 继承 React.Component，render() 方法返回虚拟dom，每次组件更新时 render 方法都会被调用, class 组件拥有三大核心属性：state, props, refs

    <div id="app"></div>

    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

    <script type="text/babel">

        class Welcome extends React.Component {
            render() {
                return <h1>Hello, {this.props.name}</h1>;
            }
        }

        ReactDOM.render(<Welcome name="word"/>,document.getElementById('app'))
    </script>

ReactDOM.render() 函数的原理：

传入 <Welcome name="word" /> 作为参数。
React 调用 Welcome 组件，并将 {name: 'word'} 作为 props 传入。
Welcome 组件将 <h1>Hello, word</h1> 元素作为返回值。
React DOM 将 DOM 高效地更新为 <h1>Hello, word</h1>。

注意： 组件名称必须以大写字母开头。 React 会将以小写字母开头的组件视为原生 DOM 标签。例如，<div /> 代表 HTML 的 div 标签，而 <Welcome /> 则代表一个组件，并且需在作用域内使用 Welcome。