5、React 组件生命周期方法与纯组件的应用

React 组件生命周期方法与纯组件的应用

1. 加密货币交换器与 shouldComponentUpdate

1.1 项目背景

如今，比特币、以太坊、瑞波币等加密货币备受关注。我们将创建一个加密货币交换器，借此了解 shouldComponentUpdate 方法的工作原理。

1.2 代码实现

import React, { Component } from 'react';
import './Coins.css';

class Coins extends Component {
  constructor() {
    super();
    this.state = {
      dollars: 0
    };
  }

  shouldComponentUpdate(props, state) {
    return state.dollars % 10 === 0;
  }

  handleOnChange = e => {
    this.setState({
      dollars: Number(e.target.value || 0)
    });
  }

  render() {
    return (
      <div className="Coins">
        <h1>Buy Crypto Coins!</h1>
        <div className="question">
          &