React.Component 和函数组件

[oliver1204]

函数组件

无状态函数式组件形式上表现为一个只带有一个render方法的组件类，并且该组件是无state状态的。具体的创建形式如下：

function HelloComponent(props, /* context */) {
  return <div>Hello {props.name}</div>
}
ReactDOM.render(<HelloComponent name="Sebastian" />, mountNode)

无状态组件的创建形式使代码的可读性更好，并且减少了大量冗余的代码，精简至只有一个render方法，大大的增强了编写一个组件的便利，除此之外无状态组件还有以下几个显著的特点：

1. 组件不会被实例化，整体渲染性能得到提升

因为组件被精简成一个render方法的函数来实现的，由于是无状态组件，所以无状态组件就不会在有组件实例化的过程，无实例化过程也就不需要分配多余的内存，从而性能得到一定的提升。

2. 组件不能访问this对象

无状态组件由于没有实例化过程，所以无法访问组件this中的对象，例如：this.ref、this.state等均不能访问。若想访问就不能使用这种形式来创建组件

3. 组件无法访问生命周期的方法

因为无状态组件是不需要组件生命周期管理和状态管理，所以底层实现这种形式的组件时是不会实现组件的生命周期方法。所以无状态组件是不能参与组件的各个生命周期管理的。

4.无状态组件只能访问输入的props，同样的props会得到同样的渲染结果，不会有副作用

React.Component

与无状态组件相比，React.Component是创建有状态的组件，这些组件是要被实例化的，并且可以访问组件的生命周期方法。

React ajax 请求数据为什么用 componentDidMount 而不是 constructor

react 生命周期

• constructor()
• getDerivedStateFromProps（）
• render()
• componentDidMount()

1. 上面这些方法的调用是有次序的，由上而下，也就是说如果你要获取外部数据并加载到组件上，只能在组件"已经"挂载到真实的网页上才能作这事情，其它情况你是加载不到组件的。

2. 由于 React Fiber 在第一阶段是可以被打断重来的，只有第二阶段是不被打断的，防止发生重复请求问题。

状态提升

状态提升

context API

为什么一定要绑定 this

如果你仅仅认为是在react 中丢失了执行上下文，就太冤枉react了，其实这是js 本身的问题。函数内部的 this 的值取决于该函数如何被调用

为什么需要在 React 类组件中为事件处理程序绑定 this