React 拾遗:类作为组件 (1)

如何使用代码

安装项目前置依赖,以及启动项目的方法,参看:React 拾遗:项目脚手架

请根据文章内容,把相应部分的代码注释取消,即可运行。

摘要

本文介绍

  • JavaScript 类与面向对象的参考资料
  • React 类中的属性与方法
  • React 的状态 state 读取与修改

项目代码地址:React 拾遗:类作为组件 (1)

JavaScript 类与面向对象

面向对象编程(Object-Oriented Programming, OOP)是一个古老的概念。OOP 要解决的一个问题是:

  • 需要有一个容器,可以存放属性与方法
  • 容器可以被继承。被继承的容器,其属性与方法都可以在新容器中继续复用

不管是 C++ 还是 Java 提到的类与实例,或者 Python 的 Metaclass,亦或是 JavaScript 的原型及其扩展,都是为了解决上述面向对象要解决的问题。

关于 JavaScript 的面向对象与原型链,可以在以下内容中找到详细叙述,本文不再赘述。

React 中的类组件

1 最简单的 React 类组件

React 的最简单的类组件如下所示:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
  render() {
    return (
      <div>
        <h1>Title - main title</h1>
        <p>The content part</p>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
  • React 的类组件都是继承自 React.Component,其中 Component 可以单独引入
  • React 类组件中唯一必须的方法是 render() {}。该方法返回一段 JSX 代码。
  • 市面上有些教程,仍然使用 createReactClass。由于 React 已经全面转向使用 ES 6,所以用 createReactClass 创建类组件已经不再推荐。建议直接继承 React.Component 来创建 React 类组件。

2 类组件的属性与状态(state)

(1) render() 方法中的变量

为了动态显示 JSX 内容,在 render() 方法中可以使用变量,如下所示:

class App extends Component {
  render() {
    const title = 'main title';
    return (
      <div>
        <h1>Title - {title}</h1>
        <p>The content part</p>
      </div>
    );
  }
}

但是 render() 方法中的变量,通常有两种用途:

  • 设置内联样式
  • 临时变量。主要根据条件,返回不同的 JSX 代码,达到根据条件判断而渲染的效果。

(2) constructor() 中的变量

如果要设置一个变量,让类中所有方法都能使用,就是放在构造器 constructor() 中。构造器中的变量,在类创建时就同时创建完成,可以在整个类中使用。

class App extends Component {
  constructor() {
    super()
    this.title = 'title in constructor'
  }

  render() {
    return (
      <div>
        <h1>Title - {this.title}</h1>
        <p>The content part</p>
      </div>
    );
  }
}

两个注意点:

  • 构造器 constructor() 中,需要用一个 super() 方法,继承所有父类的属性与方法。而且,如果这个类组件要接受上层传递下来的 props 时,需要写成
class App extends Component {
  constructor(props) {
    super(props)
    //...
  }
  //...
}
  • 另外,作为类属性,在constructor()定义和JSX使用时,前面都要加上 this.

(3) React 类组件的状态

React 类组件一个非常重要的内容,就是维护自己的内部状态(state)。这个状态需要放在 constructor() 中。类中的重要属性(需要保持的数据),基本都是放在状态中。

  • 注意 state 必须是一个对象。
  • state 中数据的读取,直接使用 this.state.<variable_name>,比如 this.state.title等。
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: 'title in constructor',
      person: {
        name: 'Jim',
        age: 25,
        location: 'China'
      }
    };
  }

  render() {
    return (
      <div>
        <h1>Title - {this.state.title}</h1>
        <p>The content part</p>
        <ul>
          <li>Name: {this.state.person.jim}</li>
          <li>Age: {this.state.person.age}</li>
          <li>Location: {this.state.person.location}</li>
        </ul>
      </div>
    );
  }
}

类中状态的修改

1 使用 .setState() 修改 state

首先,** 永远不要直接修改 state **。请一定使用.setState() 修改 state 。

下面实现的功能是,有一个新增加的按钮,点击以后,标题会从 'title in constructor' 更改成 'The changed title'。constructor()中、新方法、JSX中处理都有变化,后面会讲解。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
  constructor(props) {
    super(props);
    this.changeNameHandler = this.changeNameHandler.bind(this);
    this.state = {
      title: 'title in constructor',
      person: {
        name: 'Jim',
        age: 25,
        location: 'China'
      }
    };
  }

  changeNameHandler() {
    this.setState({ title: 'The changed title' })
  }

  render() {
    return (
      <div>
        <h1>Title - {this.state.title}</h1>
        <p>The content part</p>
        <ul>
          <li>Name: {this.state.person.jim}</li>
          <li>Age: {this.state.person.age}</li>
          <li>Location: {this.state.person.location}</li>
        </ul>
        <button onClick={this.changeNameHandler}>Change title</button>
      </div>
    );
  }
}

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

(1) 修改 state 的方法

  • 类中新增加了一个方法 changeNameHandler,形式是 <className>() {}。该方法只有一个功能,就是修改 state。

  • 该方法调用了 React 类组件自带的方法 this.setState() 方法去修改 state。

  • .setState() 方法接受一个对象,这里传入的对象是 { title: 'The changed title' }。该对象会把 state 中对应的,相同键名的内容进行变更。比如,新的内容 title: 'The changed title' 会覆盖掉原来 state 中是 title: 'title in constructor'。同时 state 中其它部分内容不会受影响,比如 person 那个键名就不会改变且依然存在。

  changeNameHandler() {
    this.setState({ title: 'The changed title' })
  }

(2) 方法绑定 this

在 constructor() 中,使用了 .bind(this)把该方法绑定在 this 上,这是因为 ES6 中,类方法并没有绑定在 this 上。后面可以使用 babel 插件,使用可以绑定 this 的方法。如果不需要在类中其他地方调用,可以不实用 .bind(this),比如生命周期的那些方法 componentDidMount() 等。

  constructor(props) {
    this.changeNameHandler = this.changeNameHandler.bind(this);
  }

当然可以把绑定 this 放在 JSX 中去做,比如:

        <button onClick={this.changeNameHandler.bind(this)}>Change title</button>

但是建议集中在 constructor 中管理,避免过于分散的 .bind(this) 散落在代码中。

(3) JSX 中调用方法

  • button 按钮上有一个 onClick 事件调用刚才设置的类方法。当点击按钮时,方法被调用。
  • onClick 中间驼峰大写,区分于 DOM 操作的 onclick
  • 方法的调用要用 {}括号,且使用 this.
  render() {
    return (
      <div>
        {/*... */}
        <button onClick={this.changeNameHandler}>Change title</button>
      </div>
    );
  }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本笔记基于React官方文档,当前React版本号为15.4.0。 1. 安装 1.1 尝试 开始之前可以先去co...
    Awey阅读 7,813评论 14 128
  • GUIDS 第一章 为什么使用React? React 一个提供了用户接口的JavaScript库。 诞生于Fac...
    jplyue阅读 3,609评论 1 11
  • 以下内容是我在学习和研究React时,对React的特性、重点和注意事项的提取、精练和总结,可以做为React特性...
    科研者阅读 8,297评论 2 21
  • 深入JSX date:20170412笔记原文其实JSX是React.createElement(componen...
    gaoer1938阅读 8,111评论 2 35
  • 【推荐书名】:《只要快乐不要哭泣,可以吗?》 【适合月龄】:3-7岁亲子共读 【推荐理由】:生命教育的收获正是在孩...
    吉熊熊阅读 343评论 0 0