前端 React 使用 ES6 类和 JSX

使用 ES6 类

在 react 中可以使用传统的 js 语法，也可以使用 ES6 的类将松散的结构组件进行封装，这样可以项目组件化。每一个 react 的组件都是一个 React.Componet 的 ES6 类，所以需要继承 Component类。例如，现在我们要写一个 Hello 的组件，使用这个组件输出一个 hello world 的标题。可以这样做：

<body>
    <div id="example"></div>
    <script type="text/babel">
        class Hello extends React.Component {
            render() {
                return (
                    <div>
                        <h1>hello world</h1>
                    </div>
                )
            }
        }
        ReactDOM.render(
            <div><span>test</span></div>,
            document.getElementById('example')
        );
    </script>
</body>

这样如果要使用这个组件直接在需要的地方写上这个类的标签就好：

ReactDOM.render(
    <div>
        <span>test</span>
        <Hello />
    </div>,
    document.getElementById('example')
);

在使用这个标签的时候，很多时候，需要根据很多情况给这个标签传一些参数，让这个标签可以根据传递的参数进行一些判断或者输出。
这个时候需要使用 props 这个变量。在类中使用这个变量相当于使用父类的这个变量，具体可以看到 React 源码中的这条语句:

readonly props: Readonly<P> & Readonly<{ children?: ReactNode }>;

所以在使用的时候，应该这样写: this.props

class Hello extends React.Component {
    render() {
        return (
            <div>
                <h1>hello world</h1>
                <p>{this.props.text}</p>
            </div>
        )
    }
}

这样在标签中使用 text 这个属性的时候，就可以将 text 属性的内容显示在下面的 p 标签中了。

ReactDOM.render(
    <div>
        <span>test</span>
        <Hello text="this is test react"/>
    </div>,
    document.getElementById('example')
);

效果如下

使用 JSX

在react中，使用了JSX代替了传统的JavaScript。
怎么说 JSX 呢，JSX 就是 HTML 和 JS 和混合版，JSX 会将一个包裹好的 HTML 元素当做变量类型。

const text = <h1>hello</h1>

这样的标签语法就称为 JSX，这样的一个标签元素也可以做为 React 中的 ReactNode 类型。在 JSX 中可以使用 JS 的表达式。例如：

const text = <h1>hello, {1+2}</h1>

这里的显示结果为 hello，3 。而 JAX 文件中不能使用 if else 语句，只能使用表达式，所以三元运算符是可以使用的。
对于一个 JSX ，我们也可以将这个 JSX 写成在独立的 js 文件中，使用的时候引入。也可以在工程化组件化中，写成一个 .jsx 文件， import 后使用。