React 组件的三种方式详解

React 组件

关于创建项目，可以选择手动创建和通过脚手架来创建。这里给一个传送门 → 通过React 脚手架创建项目

我们先来编写第一个 react 程序

// 从 react 的包当中引入了 React。只要你要写 React.js 组件就必须引入React, 因为react里有一种语法叫JSX，稍后会讲到JSX，要写JSX，就必须引入React
import React from 'react'
// ReactDOM 可以帮助我们把 React 组件渲染到页面上去，没有其它的作用了。它是从 react-dom 中引入的，而不是从 react 引入。
import ReactDOM from 'react-dom'

// ReactDOM里有一个render方法，功能就是把组件渲染并且构造 DOM 树，然后插入到页面上某个特定的元素上
ReactDOM.render(
// 这里就比较奇怪了，它并不是一个字符串，看起来像是纯 HTML 代码写在 JavaScript 代码里面。语法错误吗？这并不是合法的 JavaScript 代码, “在 JavaScript 写的标签的”语法叫 JSX- JavaScript XML。
  <h1>欢迎进入React的世界</h1>,
// 渲染到哪里
  document.getElementById('root')
)

接下来就是创建组件的方式，分为以下几点：

函数式定义的无状态组件
es5原生方式React.createClass定义的组件
es6形式的extends React.Component定义的组件

下面简单介绍下有何不同之处。

1、无状态函数式组件

通过函数形式或者ES6 箭头 function的形式在创建，并且该组件是无state状态的。
创建纯展示组件，只负责根据传入的props来展示，不涉及到要state状态的操作，是一个只带有一个render方法的组件类

创建形式如下：

import React from "react";
import ReactDOM from "react-dom";

const App = props => {
  return <h1> 欢迎进入 {props.name} 的世界</h1>;
};

ReactDOM.render(<App name="react" />, document.getElementById("root"));

无状态组件的创建形式使代码的可读性更好，并且减少了大量冗余的代码,在,开发过程中，尽量使用无状态组件。

其特点如下：

组件不会被实例化，整体渲染性能得到提升
组件不能访问this对象
组件无法访问生命周期的方法
无状态组件只能访问输入的props，同样的props会得到同样的渲染结果，不会有副作用

2、React.createClass

React.createClass是react刚开始推荐的创建组件的方式，这是ES5的原生的JavaScript来实现的React组件。

ps：React 版本16以后，React.createClass({})创建组件的方式失效。

需要以另一种形式创建，其形式如下：

import React from "react";
import ReactDOM from "react-dom";
import createClass from "create-react-class";

const App = createClass({
  render() {
    return <h1>Hello {this.props.name}</h1>;
  }
});
ReactDOM.render(<App name="react" />, document.getElementById("root"));

这个方式创建组件，需要单独安装create-react-class，否则会出现问题。

React.createClass会自绑定函数方法导致不必要的性能开销
React.createClass的mixins不够自然、直观

与无状态组件相比，React.createClass和后面要描述的React.Component都是创建有状态的组件，这些组件是要被实例化的，并且可以访问组件的生命周期方法。

3.React.Component

React.Component是以ES6的形式来创建react的组件的，是React目前极为推荐的创建有状态组件的方式，最终会取代React.createClass形式；相对于 React.createClass可以更好实现代码复用。

import React, { Component } from "react";
import ReactDOM from "react-dom";
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return <div>这里是</div>;
  }
}
ReactDOM.render(<Index name="react" />, document.getElementById("root"));

需要注意的是在书写construstor之后，里面一定要写一个super()，否则会出现问题。

以上的方式也可以单独提炼出一个单文件组件，但要注意！注意！注意！组件名必须大写，否则报错。

加餐！！！

下面来讲一下如何用 JavaScript 对象来表现一个 DOM 元素的结构
代码如下

<div class='app' id='appRoot'>
  <h1 class='title'>欢迎进入React的世界</h1>
  <p>
    React.js 是一个帮助你构建页面 UI 的库
  </p>
</div>

上面这个 HTML 所有的信息我们都可以用 JavaScript 对象来表示

{
  tag: 'div',
  attrs: { className: 'app', id: 'appRoot'},
  children: [
    {
      tag: 'h1',
      attrs: { className: 'title' },
      children: ['欢迎进入React的世界']
    },
    {
      tag: 'p',
      attrs: null,
      children: ['React.js 是一个构建页面 UI 的库']
    }
  ]
}

但是用 JavaScript 写起来太长了，结构看起来又不清晰，用 HTML 的方式写起来就方便很多了。

于是 React.js 就把 JavaScript 的语法扩展了一下，让 JavaScript 语言能够支持这种直接在 JavaScript 代码里面编写类似 HTML 标签结构的语法，这样写起来就方便很多了。编译的过程会把类似 HTML 的 JSX 结构转换成 JavaScript 的对象结构。
下面代码:

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
  render () {
    return (
      <div className='app' id='appRoot'>
        <h1 className='title'>欢迎进入React的世界</h1>
        <p>
          React.js 是一个构建页面 UI 的库
        </p>
      </div>
    )
  }
}

ReactDOM.render(
	<App />,
  document.getElementById('root')
)

编译之后将得到这样的代码:

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
  render () {
    return (
      React.createElement(
        "div",
        {
          className: 'app',
          id: 'appRoot'
        },
        React.createElement(
          "h1",
          { className: 'title' },
          "欢迎进入React的世界"
        ),
        React.createElement(
          "p",
          null,
          "React.js 是一个构建页面 UI 的库"
        )
      )
    )
  }
}

ReactDOM.render(
	React.createElement(App),
  document.getElementById('root')
)

4.函数this

React.createClass创建的组件，其每一个成员函数的this都有React自动绑定，任何时候使用，直接使用this.method即可，函数中的this会被正确设置。
React.Component创建的组件，其成员函数不会自动绑定this，需要开发者手动绑定，否则this不能获取当前组件实例对象。
React.Component三种手动绑定this的方法:

在构造函数中绑定
使用bind绑定
使用arrow function绑定

4.1、在构造函数中绑定

constructor(props) {
	 super(props); 
	 this.Enter = this.Enter.bind(this);
 }

4.2、使用bind绑定

<div onKeyUp={this.Enter.bind(this)}></div>

4.2、使用arrow function绑定

<div onKeyUp={(event)=>this.Enter(event)}></div>

小小总结：
1.只要有可能，尽量使用无状态组件创建形式,否则（如需要state、生命周期方法等），使用React.Component这种es6形式创建组件.
2.绑定this推荐使用在构造函数里进行

来源：CSDN

作者：Dark_programmer

链接：https://blog.csdn.net/Dark_programmer/article/details/104629552

标签

react

javascript

React 组件的三种方式 详解