react

react是什么

React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。

组件定义

class组件

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

直接写html这部分属于jsx，它允许 HTML 与 JavaScript 的混写;现在使用babel/plugin-transform-react-jsx 编译为以下形式：

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h1', /* ... h1 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

函数组件

function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}

通过 Props 传递数据

//子组件
class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}
      </button>
    );
  }
}
//父组件
class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;
  }
}

事件也是通过props传递的，比如传入回调

//子组件
import react from "react"

export default class Child extends react.Component {
  constructor(props){
    super(props)
    this.state = {
      name: props.name
    }
  }

  static getDerivedStateFromProps(nextProps, prevState){
    const { name } = nextProps
    if (name !== prevState.name) {
      return {name}
    }
    return null
  }

  render(){
    return(
      <div>
        child name: {this.state.name}&nbsp;
        <input type="button" value="修改父组件name" onClick={() => this.props.changeParentName('动次打次')}></input>
      </div>
    )
  }
}


// 父组件
import Child from './Child'
import React, { useEffect } from 'react'
export default function Parent(props){
  const [name, setName] = React.useState(props.name);

  const handleChangeText = (event)=> {
    setName(event.target.value)
  }
  useEffect(() => {
    console.log('eee')
    return () => {
      console.log('bbbb')
    }
  })
  const changeParentName = (name) => {
    setName(name)
  }
  return(
    <div>
      <div>parent
        name:<input type="text" value={name} onChange={ handleChangeText }></input>
      </div>
      <div style={{'paddingLeft': '20px'}}>
        <Child name={name} changeParentName={(pName) => {changeParentName(pName)}}></Child>
      </div>
    </div>
  )
}

事件

React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同:

• React 事件绑定属性的命名采用驼峰式写法，而不是小写。
• 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)

<button onClick={activateLasers}>
  激活按钮
</button>

动态加载组件

  return (
    <div>
      <div>parent
        name:<input type="text" value={name} onChange={ handleChangeText }></input>
      </div>
      <div style={{'paddingLeft': '20px'}}>
        <Child name={name} changeParentName={(pName) => {changeParentName(pName)}}></Child>
      </div>
      <div>
        <button onClick={ () => setShowCycle(!showCycle)}>{showCycle ? '隐藏' : '显示'}</button>
      </div>
      {showCycle ? <LifeCycle></LifeCycle> : ''}
  </div>
  )

生命周期

image.png

每个组件都包含 “生命周期方法”，你可以重写这些方法，以便于在运行过程中特定的阶段执行这些方法。你可以使用此生命周期图谱作为速查表。在下述列表中，常用的生命周期方法会被加粗。其余生命周期函数的使用则相对罕见。

挂载

当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：

• constructor()
• static getDerivedStateFromProps()
  getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。
• render()
• componentDidMount()

更新

当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

卸载

当组件从 DOM 中移除时会调用如下方法：

• componentWillUnmount()

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

错误处理

当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用如下方法：

• static getDerivedStateFromError()
• componentDidCatch()

componentWillUnmount() 中不应调用 setState()，因为该组件将永远不会重新渲染。组件实例卸载后，将永远不会再挂载它。

附https://www.zhihu.com/question/301860721