React生命週期與父子元件間通訊知識點詳細講解

class HelloWorld extends React.Component {
  // 1.構造方法: constructor
  constructor() {
    console.log("HelloWorld constructor")
    super()
    this.state = {
      message: "Hello World"
    }
  }
  changeText() {
    this.setState({ message: "你好啊, 李銀河" })
  }
  // 2.執行render函數
  render() {
    console.log("HelloWorld render")
    const { message } = this.state
    return (
      <div>
        <h2>{message}</h2>
        <p>{message}是程式設計師的第一個程式碼!</p>
        <button onClick={e => this.changeText()}>修改文字</button>
      </div>
    )
  }
  // 3.元件被渲染到DOM: 被掛載到DOM
  componentDidMount() {
    console.log("HelloWorld componentDidMount")
  }
  // 4.元件的DOM被更新完成： DOM發生更新
  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("HelloWorld componentDidUpdate:", prevProps, prevState, snapshot)
  }
  // 5.元件從DOM中解除安裝掉： 從DOM移除掉
  componentWillUnmount() {
    console.log("HelloWorld componentWillUnmount")
  }
  // 不常用的生命週期補充
  shouldComponentUpdate() {
    return true
  }
  getSnapshotBeforeUpdate() {
    console.log("getSnapshotBeforeUpdate")
    return {
      scrollPosition: 1000
    }
  }
}

import PropTypes from 'prop-types';
MyComponent.propTypes = {
  // 你可以將屬性宣告為 JS 原生型別，預設情況下
  // 這些屬性都是可選的。
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,
  // 任何可被渲染的元素（包括數位、字串、元素或陣列）
  // (或 Fragment) 也包含這些型別。
  optionalNode: PropTypes.node,
  // 一個 React 元素。
  optionalElement: PropTypes.element,
  // 一個 React 元素型別（即，MyComponent）。
  optionalElementType: PropTypes.elementType,
  // 你也可以宣告 prop 為類的範例，這裡使用
  // JS 的 instanceof 操作符。
  optionalMessage: PropTypes.instanceOf(Message),
  // 你可以讓你的 prop 只能是特定的值，指定它為
  // 列舉型別。
  optionalEnum: PropTypes.oneOf(['News', 'Photos']),
  // 一個物件可以是幾種型別中的任意一個型別
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ]),
  // 可以指定一個陣列由某一型別的元素組成
  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
  // 可以指定一個物件由某一型別的值組成
  optionalObjectOf: PropTypes.objectOf(PropTypes.number),
  // 可以指定一個物件由特定的型別值組成
  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` ，確保
  // 這個 prop 沒有被提供時，會列印警告資訊。
  requiredFunc: PropTypes.func.isRequired,
  // 任意型別的必需資料
  requiredAny: PropTypes.any.isRequired,
  // 你可以指定一個自定義驗證器。它在驗證失敗時應返回一個 Error 物件。
  // 請不要使用 `console.warn` 或丟擲異常，因為這在 `oneOfType` 中不會起作用。
  customProp: function(props, propName, componentName) {
    if (!/matchme/.test(props[propName])) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  },
  // 你也可以提供一個自定義的 `arrayOf` 或 `objectOf` 驗證器。
  // 它應該在驗證失敗時返回一個 Error 物件。
  // 驗證器將驗證陣列或物件中的每個值。驗證器的前兩個引數
  // 第一個是陣列或物件本身
  // 第二個是他們當前的鍵。
  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() {
    // 這必須只有一個元素，否則控制檯會列印警告。
    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 的預設值：
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>當前計數: {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