React类组件如何避免未就绪值引发的不必要渲染？

问题出在组件初始渲染时，selectedName是空字符串，而API请求还在进行中，所以会先渲染"ask for the name"。哪怕加了isLoading，如果初始状态没设对或者渲染逻辑没处理好，还是会出现这个问题。

你可以通过以下方式修改：

1. 添加isLoading状态，初始设为true，确保组件挂载后先处于加载状态，不显示默认提示
2. API请求完成后（无论成功失败），更新isLoading为false
3. 渲染时优先判断加载状态，加载中可以留白或自定义加载提示，加载完成后再根据selectedName显示内容

修改后的代码：

class MyComponent extends React.Component {
  @observable selectedName = ''
  @observable isLoading = true // 初始设为加载状态

  constructor(props) {
    super(props)
    this.selectedName = this.props.myName || ''
    // 如果props里有myName，直接结束加载状态
    if (this.props.myName) {
      this.isLoading = false
    }
  }

  async componentDidMount () {
    const id = getLocalStorage('storeId')
    if (id) {
      try {
        const { name } = await myContainer.getName({id})
        if (!isEmpty(name)) {
          this.selectedName = name
        }
      } finally {
        // 请求完成（成功/失败）都结束加载状态
        this.isLoading = false
      }
    } else {
      // 没有id，直接结束加载
      this.isLoading = false
    }
  }

  render() {
    const { selectedName, isLoading } = this

    // 加载中时不显示默认提示，可替换为加载动画等
    if (isLoading) {
      return <div className="my-wrapper"></div>
    }

    return (
      <div className="my-wrapper">
        {selectedName ? selectedName : <div>ask for the name</div>}
      </div>
    )
  }
}

关键说明： #

• 初始isLoading = true，第一次渲染时只会返回空的容器（或自定义加载内容），不会显示默认提示
• 当props.myName存在时，直接结束加载状态，避免不必要的等待
• API请求用try/finally包裹，确保无论请求成功还是失败，都会结束加载状态
• 加载完成后才会根据selectedName的值，决定显示名称还是默认提示

内容的提问来源于stack exchange，提问作者codebear22