react

React 组件

React的组件相对于Vue更加的灵活和多样，按照不同的方式可以分成很多类组件：根据组件的定义方式，可以分为：函数组件(Functional Component )和类组件(Class Component)；根据组件内部是否有状态需要维护，可以分成：无状态组件(Stateless Component )和有状态组件(Stateful Component)；根据组件的不同职责，可以分成：展示型组件(Presentational Component)和容器型组件(Container Component)；

类组件

// 类组件
class App extends React.Component{
  constructor(){
    super()
    this.state={
      message:"App Component"
    }
  }
  render(){
    // const {message} =this.state
    return [
      <div>111</div>,
      <h2>111</h2>,
      <h2>222</h2>
    ]
  }
}

函数式组件

 function App(){  
 return <h2>App</h2>
}
export default App;

没有生命周期，也会被更新并挂载，但是没有生命周期函数；

this关键字不能指向组件实例（因为没有组件实例）；

没有内部状态（state）

组件生命周期

 

import React from "react";
class Helloword extends React.Component{
  //1.构造方法
  constructor(){
    console.log("constructor")
    super()
    this.state={
      message:"hello word"
    }
  }
  changetext(){
    this.setState({message:"你好啊"})
  }
  //2.render方法
  render(){
    console.log("render")
    const {message}=this.state
    return(
      <div>
        <h2>{message}</h2>
        <button onClick={e=>this.changetext()}>修改文本</button>
      </div>
    )
  }
  //3.组件被渲染到DOM ,被渲染到DOM
  componentDidMount(){
    console.log("hellowrod mount")
  }
  //4.组件的DOM被更新完成，DOM发生更新
  componentDidUpdate(){
    console.log("component did update")
  }
  //5.组件从DOM卸载
  componentWillUnmount(){
    console.log("xiezai")
  }
}
export default Helloword

Constructor

如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数。constructor中通常只做两件事情：

通过给 this.state 赋值对象来初始化内部的state；为事件绑定实例（this）；

componentDidMount

componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。componentDidMount中通常进行哪里操作呢？依赖于DOM的操作可以在这里进行；

在此处发送网络请求就最好的地方；（官方建议）

可以在此处添加一些订阅（会在componentWillUnmount取消订阅）

componentDidUpdate

componentDidUpdate() 会在更新后会被立即调用，首次渲染不会执行此方法。当组件更新后，可以在此处对 DOM 进行操作；如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求；（例如，当 props 未发生变化时，则不会执行网络请求）。

componentWillUnmount

componentWillUnmount() 会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作；例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等；

除了上面的生命周期函数之外，还有一些不常用的生命周期函数：

getDerivedStateFromProps ：

state 的值在任何时候都依赖于 props时使用；该方法返回一个对象来更新state；

getSnapshotBeforeUpdate：

在React更新DOM之前回调的一个函数，可以获取DOM更新前的一些信息（比如说滚动位置）；