5. 各种各样的Class components

类组件

import React from 'react'
import axios from 'axios'
class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      anecdotes: [],
      current: 0,
    }
  }
  componentDidMount = () => {
    axios.get('http://localhost:3001/anecdotes').then((response) => {
      this.setState({ anecdotes: response.data })
    })
  }
  handleClick = () => {
    const current = Math.floor(Math.random() * this.state.anecdotes.length)
    this.setState({ current })
  }
  render() {
    if (this.state.anecdotes.length === 0) {
      return <div>no anecdotes...</div>
    }
    return (
      <div>
        <h1>anecdote of the day</h1>
        <div>{this.state.anecdotes[this.state.current].content}</div>
        <button onClick={this.handleClick}>next</button>
      </div>
    )
  }
}
export default App

• 类组件的所有状态都存在this.state对象中
• 用this.setState修改state, 指定要修改的属性和值，其他的属性不会被修改
• 调用 setState 方法总是触发类组件的重新运行，即调用方法 render
• 用生命周期componentDidMount替代useEffect

• 类组件基本上没有比通过Hook增强的函数组件提供任何好处，除了所谓的“错误边界”。如果项目使用的是 React 16.8或更高, 没有任何理由使用类组件

  Organization of code in React application

  在大多数应用中，我们遵循的原则是，

• 将组件放在目录components 中，

• reducer程序放在目录reducers 中，
• 负责与服务器通信的代码放在目录services 中。

这种组织方式适合于较小的应用，但是随着组件数量的增加，需要更好的解决方案。 组织一个项目没有一种正确的方法。 这篇文章100% 正确的方式构建一个 React 应用(或为什么根本没这回事)提供了一些关于这个问题的观点。

Frontend and backend in the same repository

• 我们通过复制将绑定的前端代码复制到后端存储库中来完成部署。
• 使用 create-react-app 创建的应用，可以单独部署前端，它非常简单，这要归功于内置的buildpack
• 有时可能会出现将整个应用放入单个存储库的情况。 在这种情况下，一种常见的方法是将package.json 和webpack.config.js 放在根目录中，并将前端和后端代码放到它们自己的目录中，例如client 和server。此存储库为“单一存储库代码”的组织提供了一个可能的起点。

Changes on the server

如果服务器上的状态发生了变化，而前端注意不到，要重新刷新页面才可以

• 一种方法是在前端执行轮询) ，这意味着重复对后端 API 的请求，例如使用setInterval-命令。
• 一个更复杂的方法是使用websocket ，利用它可以在浏览器和服务器之间建立一个双向通信通道。
• 与直接使用 WebSocket API 不同，建议使用Socket.io-library，该库提供各种fallback-options，以防浏览器不完全支持 WebSocket。

  Virtual DOM

  React不直接操作DOM,
  定义应用组件外观的 React-elements 组成了Virtual DOM ，它在运行时存储在系统内存中。
  在ReactDOM库的帮助下，这些组件定义的虚拟 DOM 被渲染成一个真实的 DOM，浏览器可以使用 DOM API 显示这个 DOM。

React在应用中的作用
React 主要是一个管理应用视图创建的库
从MVC的角度来说，React 的领域将是View
因此 React 不被称为framework，而是一个库

在小型应用中，应用处理的数据存储在 React-components 的状态中，在这个场景中，组件的状态可以被认为是 mvc 架构的模型。

如果我们正在使用 Redux，那么应用遵循Flux-架构，React 的角色更专注于创建视图。

应用的业务逻辑使用 Redux 状态和操作创建者来处理。 如果在 redux 应用中使用redux thunk，那么业务逻辑几乎可以与 React 代码完全分离。
React Context-api为集中式状态管理提供了一种替代方案，无需 redux 之类的第三方库。

React社区
https://www.reactiflux.com/