React组件中Props到State的映射与高效列表渲染实践

class LoggBockRowList extends Component {
    state = {
        loggbocks: [null],
    }

    handleloggbocks = () => {
        // 尝试将渲染后的LoggBockRowItem组件实例存储到state中
        this.setState({
            loggbocks: [this.props.loggbocks.map(loggbock =>
                <LoggBockRowItem
                    key={loggbock.key}
                    id={loggbock.id}
                    datum={loggbock.datum}
                    tid={loggbock.tid}
                    skift={loggbock.skift}
                    anläggningsdel={loggbock.anläggningsdel}
                    orsak={loggbock.orsak}
                    driftstatus={loggbock.driftstatus}
                    beskrivning={loggbock.beskrivning}
                    plats={loggbock.plats}
                    rapporterare={loggbock.rapporterare}
                />)]
        })
    }

    render() {
        // 在render方法中调用setState，会导致无限循环渲染
        this.handleloggbocks();
        return <ul>{this.loggbocks}</ul> // 注意：这里访问的是this.loggbocks而非this.state.loggbocks
    }
}

import React, { Component } from 'react';
// 假设LoggBockRowItem组件已经定义并导入
// import LoggBockRowItem from './LoggBockRowItem'; 

class LoggBockRowList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loggbocks: null // 初始状态，存储从props接收到的原始数据
    };
  }

  /**
   * getDerivedStateFromProps 在每次渲染前被调用，用于根据props更新state。
   * 它必须返回一个对象来更新state，或者返回null表示不更新。
   * @param {object} props - 新的props
   * @param {object} state - 当前的state
   * @returns {object|null} - 用于更新state的对象，或null
   */
  static getDerivedStateFromProps(props, state) {
    // 将props.loggbocks中的原始数据存储到state.loggbocks中
    // 注意：这里只存储数据，不进行JSX的转换
    if (props.loggbocks !== state.loggbocks) { // 避免不必要的更新
        return {
            loggbocks: props.loggbocks
        };
    }
    return null; // 如果props.loggbocks没有变化，则不更新state
  }

  render() {
    return (
      <ul>
        {/* 只有当state.loggbocks存在且不为空时才进行渲染 */}
        {this.state.loggbocks &&
          this.state.loggbocks.map((loggbock) => (
            <LoggBockRowItem
              key={loggbock.key} // 列表渲染必须提供唯一的key
              id={loggbock.id}
              datum={loggbock.datum}
              tid={loggbock.tid}
              skift={loggbock.skift}
              anläggningsdel={loggbock.anläggningsdel}
              orsak={loggbock.orsak}
              driftstatus={loggbock.driftstatus}
              beskrivning={loggbock.beskrivning}
              plats={loggbock.plats}
              rapporterare={loggbock.rapporterare}
            />
          ))}
      </ul>
    );
  }
}