肉渣教程

React 开始

上一节 下一节

本章节教你快速上手React，用React写一个最简单的程序。

React 开始

参照如下步骤，使用React写一个简单例子：使用React构建一个按钮，按钮文本为“slogan”，当用户点击了该按钮，在该按钮变成指定的文本“地振高冈，一派西山千古秀”。


Step.1 引入react相关文件

react.js和react-dom.js是react必须导入的脚本，babel.js是JSX的依赖文件，以免麻烦，一次性全插入吧，代码如下：

<script src="https://cdn.zhuanfou.com/react.js" crossorigin></script>
<script src="https://cdn.zhuanfou.com/react-dom.js" crossorigin></script>
<script src="https://sand-box.cn/static/babel.js" crossorigin></script>


Step.2 自定义一个DOM容器

自定义一个空的<div>元素以标记React显示内容的位置：

<div id="root"></div>


Step.3 创建一个React组件

SloganButton这个自定义的类则是基于React.Compent类而自定义的一个React组件，根据自己的需求定义即可，之后去使用这个自定义的组件即可。

class SloganButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { show_slogan: false };
  }

  render() {
    if (this.state.show_slogan) {
      return '地振高冈，一派西山千古秀。';
    }

    return e(
      'button',
      { onClick: () => this.setState({ show_slogan: true }) },
      'Slogan'
    );
  }
}


Step.4 使用自定义的React组件

将React.createElement方法赋值给e，是为了方便程序的书写，因为“e”只要打1个字母即可，而“React.createElement”要打19个字母。当然也可以定义成别的字词，只要不冲突即可。但是React中习惯性使用“e”；这成为了一种约定俗成的习惯。

使用e所代表的React.createElement方法，根据自定义的React组件来创建一个实例对象。通过ReactDOM.render方法将该实例对象置入指定的HTML元素中予以显示。

const e = React.createElement;
ReactDOM.render(e(SloganButton), document.getElementById('root') );

等价于

const e = React.createElement;
const domContainer = document.querySelector('#root');
ReactDOM.render(e(SloganButton), domContainer);

运行一下

在React中使用JSX

上述React组件中显示Slogan按钮的一段代码如下：

const e = React.createElement;

// 显示一个 "Slogan" <button>
// 若该用户点击了该元素对象，
// 则将该元素对象的show_slogan属性设置成true
return e(
      'button',
      { onClick: () => this.setState({ show_slogan: true }) },
      'Slogan'
    );


而JSX则是在JS脚本中直接写类似html的代码，比如使用JSX的方式重构上述的代码则如下所示：

return (
        <button onClick={() => this.setState({ show_slogan: true })}>
            Slogan
        </button>
    );


但是，不能这样直接去换，使用JSX的方式要做如下两件事：

  • 在HTML中插入babel.js（上述已经插入）
  • 在用到JSX的<script>标签中，一定要添加type="text/babel"或type="text/jsx"，否则浏览器不会知道这些是JSX


没有做到上述两件事情，就会出现常见的使用错误《React中为啥JSX不生效呢？》

上述的方式只适合于学习和创建简单的示例，因为这种方式会让网站速度变慢，官方说这种方式并不适合用于生产环境，官方建议使用JSX预处理器的方式，不过那就得先按照Node.js了。专否认为，上述的方式确实会让速度变慢，但是只要不是数据量太大、对性能要求没有那么苛刻，都可以使用上述这种方式，速度哪怕再慢，大多情况下对人的感觉都是瞬间。虽然说Babel都将近1MB大小，但是目前的4G时代乃至即将到来的5G时代，这个大小的JS文件不是啥问题，而且加载一次，本地浏览器就会有缓存的，因此不会有太大影响。不过JSX预处理器的方式肯定是速度更快、更完美。

安装 JSX预处理器

首先，需要在计算机上安装好Node.js，然后通过终端跳到指定的项目文件夹中，执行如下两行命令：

$ npm init -y
$ npm install babel-cli@6 babel-preset-react-app@3

这里只是用npm来安装JSX预处理器，之后就不需要用到npm了。React和应用程序代码都可以继续使用<script>标签而不需要再对type属性进行标注了。

运行 JSX预处理器

创建一个名为src的文件夹并执行如下终端命令：

npx babel --watch src --out-dir . --presets react-app/prod

npx命令是npm附带的package运行工具，此时若在src文件夹中创建某个JS文件，则在该JS文件中就可以自由使用JSX了。

JSX预处理器的方式是效率更高，但是这里依然对“预处理器”的方式保留意见。私以为：对JSX以及其他相关的预处理器，应该在代码部署前一次性处理，而不是在服务器端以监听器的形式存在，因为在服务器上做这事不唯美。上述观点，可能存在争议，仅供参考。

React 开始

上一节 下一节