react 组件化开发

分而治之的思想

将一个复杂的问题拆分成许多小的问题，通过解决每一个小问题进而解决复杂的问题。比如：在求解大数问题上就用到了分而治之的思想。

组件化开发

组件：组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。

将一个完整的页面分成很多个组件，每个组件都用于实现页面的一个具体功能。而每一个组件还可以根据具体需求进行具体的划分，另外有的组件也可以在不同的页面进行复用

常见的组件

常见的组件有两种

• 类组件，也叫做有状态组件
• 函数组件，也叫做无状态组件

区别：

有状态组件：拥有状态、拥有生命周期、可以使用 this

无状态组件：不可以拥有状态、没有生命周期，不可以使用 this

无状态组件的性能比有状态组件的性能要高

类组件

定义的要求

• 组件的名称要以大写字符开头
• 类组件需要继承自 React.Component
• 类组件必须实现 render 函数

class App extends Component {
   
  // 初始化数据
  constructor() {
   
    super();
    // 组件内部的数据
    this.state = {
   
      message: 'hello'
    }
  }

  render() {
   
    return (
      <div>
        {
   this.state.message}
      </div>
    )
  }
}

render 函数的返回值

当 render 被调用时，它会检查 this.props 和 this.state 的变化并返回以下类型之一

• react 元素：通常通过 jsx 创建，比如<div/>会被 react渲染为 dom 节点，<MyComponentds/>会被 react 渲染为 自定义组件；不论是上述的那个，它们都是 react 元素
• 字符串或数值类型：它们在 DOM 中会被渲染为文本节点
• 布尔类型或 null：什么都不渲染
• 数组或 fragments：使得 render 方法可以返回多个元素
• Portals：可以渲染子节点到不同的 DOM 子树中

函数组件

函数组件是使用function来进行定义的函数

特点

• 没有生命周期，也会被更新并挂载，但是没有生命周期函数
• 没有this(组件实例）
• 没有内部状态（state）

function App() {
   
  return (
    <div>
        hhh
    </div>
  )
}

组件的生命周期

生命周期

从创建到销毁的整个过程，称之为是生命周期

生命周期的整个过程，分成了很多阶段

• 比如装载阶段（Mount），组件第一次在DOM树中被渲染的过程
• 比如更新过程（Update），组件状态发生变化，重新更新渲染的过程
• 比如卸载过程（Unmount），组件从DOM树中被移除的过程

生命周期函数

React内部为了告诉我们当前处于哪些阶段，会对我们组件内部实现的某些函数进行回调，这些函数就是生命周期函数

链接

挂载卸载过程

constructor()

完成React数据的初始化，它接受两个参数：props和context，当想在函数内部使用这两个参数时，需使用super()传入这两个参数。

注意：只要使用了constructor()就必须写super()，否则会导致this指向错误

componentWillMount()

已经不推荐使用了

componentDidMount()

• 依赖于DOM的操作可以在这里进行
• 在此处发送网络请求就最好的地方；（官方建议）
• 可以在此处添加一些订阅（会在componentWillUnmount取消订阅）；

componentWillUnmount

清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等；

更新过程

componentDidUpdate

componentDidUpdate() 会在更新后会被立即调用，首次渲染不会执
行此方法

shouldComponentUpdate(nextProps,nextState)

主要用于性能优化，主要是返回值

更多

组件之间的通信

父组件传递子组件

父组件通过 属性=值 的形式来传递给子组件数据，子组件通过 props 参数获取父组件传递过来的数据

class Child1 extends Component {
   
  render() {
   
    const {
    name } = this.props
    return (
    <h2>子组件1：{
   name}</h2>
    )     
  }
}

function Child2(props) {
   
  const {
    name } = props;
  return (
    <h2>子组件2：{
   name}</h2>
  )  
}
class App extends Component {
   
  render() {
   
    return (
      <div>
        <Child1 name="小冯1"