类组件

使用class定义组件的时候，首先要先从react中解构出React.Component,并继承它

class Test extends Component{ 
    //继承Component，Component相当于React.Component  
    render(){   
    return <div>我是class定义的一个组件</div> 
}}
ReactDOM.render()

当组件是一个类定义的时候，执行ReactDOM.render函数的原理：

1、首先找到组件对应的类，并new了这个类的一个实例

2、通过实例找到原型上的render函数，让render执行

3、ReactDOM.render接收到原型上render函数retrun的虚拟的dom

4、将虚拟dom转换成真实dom，插入到页面中

setState是react类组件中最常用的一个react API，使用它可以改变state从而改变页面。

this.setState是异步的

在你调用了this.setState后在他的下面输出他的结果还是没变的状态

this.setState({count:this.state.count+1})
console.log(this.state,‘000’) //结果式之前的，不是最新的

this.setState的第一个参数可以是一个对象，也可以是一个函数返回一个对象，

函数的参数是上一次的state

this.setState((prevState)=>({count:prevState.count+1}))

this.setState的第二个参数是它的回调函数，在前面重新给state赋值后执行

this.setState({count:this.state.count+1},()=>{
console.log(this.state.count)
})

注：多次调用state会合并为一次,只有当更新结束后 state 才会改变

多次调用state,同时执行

setTimeout(()=>{
   this.setState({count:this.state.count+1})
   this.setState({count:this.state.count+1})
   this.setState({count:this.state.count+1})
},100)

组件之间的区别

函数式组件和类组件的区别

1. 语法上的区别：

函数式组件是一个纯函数，它是需要接受props参数并且返回一个React元素就可以了。

类组件是需要继承React.Component，而且class组件需要创建render并且返回React元素，

语法上来讲更复杂。

调用方式：

函数式组件可以直接调用，返回一个新的React元素；

类组件在调用时是需要创建一个实例的，然后通过调用实例里的render方法来返回一个React元素。

状态管理(state)：

函数式组件没有状态管理，类组件有状态管理。

使用场景：

类组件没有具体的要求。

函数式组件一般是用在大型项目中来分割大组件（函数式组件不用创建实例，所有更高效），

一般情况下能用函数式组件就不用类组件，提升效率。

组件的状态（state）和属性（props）之间有何不同

State 是一种数据结构，用于组件挂载时所需数据的默认值。
State 可能会随着时间的推移而发生突变，但多数时候是作为用户事件行为的结果。
Props(properties 的简写)则是组件的配置。
props 由父组件传递给子组件，并且就子组件而言，props 是不可变的(immutable)。
组件不能改变自身 的 props，但是可以把其子组件的 props 放在一起(统一管理)。
Props 也不仅仅是数据–回调函数也可以通过 props 传递。

什么是有状态组件？什么是无状态组件？

有状态组件和无状态组件指的是组件是否有自己的数据（state）

有状态组件

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      name: '张三'
    }
  }
  render() {
    return (
      <div>
        <h1>{this.state.name}</h1>
      </div>
    )
  }
}
注：类组件继承React.Component组件，会从父类中继承一个state属性，通过这个属性可以定义自己的状态

无状态组件

function App() {
  return (
    <div>
      <h1>hello</h1>
    </div>
  )
}
注：函数式组件没有继承React.Component组件，没有state属性，没有自己的状态 (使用HOOK可以给函数式组件添加状态)

函数式无状态组件特点

● 它是为了创建纯展示组件，这种组件只负责根据传入的props来展示，不涉及到state状态的操作。

● 组件不能访问this对象

● 不能访问生命周期方法

函数式组件的性能优化

减少重新 render 的次数。因为在 React 里最重(花时间最长)的一块就是 reconction(简单的可以理解为 diff)，如果不 render，就不会 reconction。

减少计算的量。主要是减少重复计算，对于函数式组件来说，每次 render 都会重新从头开始执行函数调用。

总结：

以上就是 React 中类组件，组件间的区别，有无状态组件，不懂得也可以在评论区里问我，以后会持续发布一些新的功能，敬请关注。