TIL-33 React Lifecycle

12019 ワード
React lifecycle はんのう テキストリンク

1.ライフサイクルの順序

  • constructor
  • render
  • componentDidMount
  • (キャプチャ完了)
  • (setState)
  • render
  • コンポーネントDidUpdate(5番目のコンポーネントにステータスが設定されているため、コンポーネントの更新が行われる)
    • .
  • componentWillUnmount

    • 2.ライフサイクルの重要性



    componentDidMountを使用してmockデータをロード中にエラーが発生しました.
    代表的なライフサイクルの問題
    class ProductDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      productInfoList: [],
    };
  }

  componentDidMount() {
    fetch('/data/productData.json', {
      method: 'GET',
    })
      .then(res => res.json())
      .then(data => {
        this.setState({
          productInfoList: data.results,
        });
      });
  }
  render() {
    const { productInfoList } = this.state;
    return (
      <>
        <div className="productDetail">
          <div className="nav">임시</div>
          <div className="list">
            <span className="home">홈</span>
            <span className="category">
              {productInfoList.section[0]}
            </span>
    順序を表示するには、まずコンストラクション関数を実行し、renderを実行します.
    ただし、ProductInfoListはsetStateが実行される前の空の配列です.
    空の配列にsection[0]というキー値が見つからないため、エラーが発生しました.
    ただし、{ProductInfoList}のみを使用している場合は、最初は未定義のエラーメッセージが発生し、エラーメッセージが発生しない可能性があります.

    3. 🌈 解析(条件付きレンダリング)


    条件付きレンダリングが使用されます.
    class ProductDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      productInfoList: [],
    };
  }

  componentDidMount() {
    fetch('/data/productData.json', {
      method: 'GET',
    })
      .then(res => res.json())
      .then(data => {
        this.setState({
          productInfoList: data.results,
        });
      });
  }
  render() {
    const { productInfoList } = this.state;
    return (
<img src={productInfoList.images && productInfoList.images[0].image_url}className="miniPhoto">
    <img src={productInfoList.images && productInfoList.images[0].image_url}className="miniPhoto">productInfoList.imagesがtrueの場合、productInfoList.images[0].イメージurlをレンダリングします.そういう意味です.
    &&演算子を使うときの注意点!
  • 変数が数値タイプの場合、0はfalseです.
  • 変数が文字列タイプである場合、空の文字列“”もfalseである.
    • 参考資料
    https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
    DebianでLAMPをインストールする
    Algorithm 1の最安値を検索