class HelloWorld extends React.Component {
  // 1.構(gòu)造方法: constructor
  constructor() {
    console.log("HelloWorld constructor")
    super()
    this.state = {
      message: "Hello World"
    }
  }
  changeText() {
    this.setState({ message: "你好啊, 李銀河" })
  }
  // 2.執(zhí)行render函數(shù)
  render() {
    console.log("HelloWorld render")
    const { message } = this.state
    return (
      <div>
        <h2>{message}</h2>
        <p>{message}是程序員的第一個(gè)代碼!</p>
        <button onClick={e => this.changeText()}>修改文本</button>
      </div>
    )
  }
  // 3.組件被渲染到DOM: 被掛載到DOM
  componentDidMount() {
    console.log("HelloWorld componentDidMount")
  }
  // 4.組件的DOM被更新完成： DOM發(fā)生更新
  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("HelloWorld componentDidUpdate:", prevProps, prevState, snapshot)
  }
  // 5.組件從DOM中卸載掉： 從DOM移除掉
  componentWillUnmount() {
    console.log("HelloWorld componentWillUnmount")
  }
  // 不常用的生命周期補(bǔ)充
  shouldComponentUpdate() {
    return true
  }
  getSnapshotBeforeUpdate() {
    console.log("getSnapshotBeforeUpdate")
    return {
      scrollPosition: 1000
    }
  }
}

import PropTypes from 'prop-types';
MyComponent.propTypes = {
  // 你可以將屬性聲明為 JS 原生類型，默認(rèn)情況下
  // 這些屬性都是可選的。
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,
  // 任何可被渲染的元素（包括數(shù)字、字符串、元素或數(shù)組）
  // (或 Fragment) 也包含這些類型。
  optionalNode: PropTypes.node,
  // 一個(gè) React 元素。
  optionalElement: PropTypes.element,
  // 一個(gè) React 元素類型（即，MyComponent）。
  optionalElementType: PropTypes.elementType,
  // 你也可以聲明 prop 為類的實(shí)例，這里使用
  // JS 的 instanceof 操作符。
  optionalMessage: PropTypes.instanceOf(Message),
  // 你可以讓你的 prop 只能是特定的值，指定它為
  // 枚舉類型。
  optionalEnum: PropTypes.oneOf(['News', 'Photos']),
  // 一個(gè)對(duì)象可以是幾種類型中的任意一個(gè)類型
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ]),
  // 可以指定一個(gè)數(shù)組由某一類型的元素組成
  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
  // 可以指定一個(gè)對(duì)象由某一類型的值組成
  optionalObjectOf: PropTypes.objectOf(PropTypes.number),
  // 可以指定一個(gè)對(duì)象由特定的類型值組成
  optionalObjectWithShape: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number
  }),
  // An object with warnings on extra properties
  optionalObjectWithStrictShape: PropTypes.exact({
    name: PropTypes.string,
    quantity: PropTypes.number
  }),
  // 你可以在任何 PropTypes 屬性后面加上 `isRequired` ，確保
  // 這個(gè) prop 沒有被提供時(shí)，會(huì)打印警告信息。
  requiredFunc: PropTypes.func.isRequired,
  // 任意類型的必需數(shù)據(jù)
  requiredAny: PropTypes.any.isRequired,
  // 你可以指定一個(gè)自定義驗(yàn)證器。它在驗(yàn)證失敗時(shí)應(yīng)返回一個(gè) Error 對(duì)象。
  // 請(qǐng)不要使用 `console.warn` 或拋出異常，因?yàn)檫@在 `oneOfType` 中不會(huì)起作用。
  customProp: function(props, propName, componentName) {
    if (!/matchme/.test(props[propName])) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  },
  // 你也可以提供一個(gè)自定義的 `arrayOf` 或 `objectOf` 驗(yàn)證器。
  // 它應(yīng)該在驗(yàn)證失敗時(shí)返回一個(gè) Error 對(duì)象。
  // 驗(yàn)證器將驗(yàn)證數(shù)組或?qū)ο笾械拿總€(gè)值。驗(yàn)證器的前兩個(gè)參數(shù)
  // 第一個(gè)是數(shù)組或?qū)ο蟊旧?
  // 第二個(gè)是他們當(dāng)前的鍵。
  customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
    if (!/matchme/.test(propValue[key])) {
      return new Error(
        'Invalid prop `' + propFullName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  })
};

import PropTypes from 'prop-types';
class MyComponent extends React.Component {
  render() {
    // 這必須只有一個(gè)元素，否則控制臺(tái)會(huì)打印警告。
    const children = this.props.children;
    return (
      <div>
        {children}
      </div>
    );
  }
}
MyComponent.propTypes = {
  children: PropTypes.element.isRequired
};

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}
// 指定 props 的默認(rèn)值：
Greeting.defaultProps = {
  name: 'Stranger'
};
// 渲染出 "Hello, Stranger"：
const root = ReactDOM.createRoot(document.getElementById('example')); 
root.render(<Greeting />);

class Greeting extends React.Component {
  static defaultProps = {
    name: 'stranger'
  }
  render() {
    return (
      <div>Hello, {this.props.name}</div>
    )
  }
}

export default function HelloWorldComponent({ name }) {
  return (
    <div>Hello, {name}</div>
  )
}

function HelloWorldComponent({ name }) {
  return (
    <div>Hello, {name}</div>
  )
}
export default HelloWorldComponent

import PropTypes from 'prop-types'
function HelloWorldComponent({ name }) {
  return (
    <div>Hello, {name}</div>
  )
}
HelloWorldComponent.propTypes = {
  name: PropTypes.string
}
export default HelloWorldComponent

import React, { Component } from 'react'
import AddCounter from './AddCounter'
import SubCounter from './SubCounter'
export class App extends Component {
  constructor() {
    super()
    this.state = {
      counter: 100
    }
  }
  changeCounter(count) {
    this.setState({ counter: this.state.counter + count })
  }
  render() {
    const { counter } = this.state
    return (
      <div>
        <h2>當(dāng)前計(jì)數(shù): {counter}</h2>
        <AddCounter addClick={(count) => this.changeCounter(count)}/>
        <SubCounter subClick={(count) => this.changeCounter(count)}/>
      </div>
    )
  }
}
export default App

import React, { Component } from 'react'
export class SubCounter extends Component {
  subCount(count) {
    this.props.subClick(count)
  }
  render() {
    return (
      <div>
        <button onClick={e => this.subCount(-1)}>-1</button>
        <button onClick={e => this.subCount(-5)}>-5</button>
        <button onClick={e => this.subCount(-10)}>-10</button>
      </div>
    )
  }
}
export default SubCounter

import React, { Component } from 'react'
// import PropTypes from "prop-types"
export class AddCounter extends Component {
  addCount(count) {
    this.props.addClick(count)
  }
  render() {
    return (
      <div>
        <button onClick={e => this.addCount(1)}>+1</button>
        <button onClick={e => this.addCount(5)}>+5</button>
        <button onClick={e => this.addCount(10)}>+10</button>
      </div>
    )
  }
}
// AddCounter.propTypes = {
//   addClick: PropTypes.func
// }
export default AddCounter