React

函数组件 setState

const handleInputChange = (event: any) => {
        const target = event.target;
        const value = target.name === 'isGoing' ? target.checked : target.value;
        const name = target.name;
        setState({ ...state, [name]: value });
    }
​
// bad
state.属性名 = xxx
setState({...state})
​
//good
setState({ ...state, [name]: value });

获取子组件 ref

function CustomTextInput(props) {
  return (
    <div>
      <input ref={props.inputRef} />
    </div>
  );
}
​
class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.inputElement = React.createRef();
  }
  render() {
    return (
      <CustomTextInput inputRef={this.inputElement} />
    );
  }
}
​
// 现在你就可以在需要时设置焦点了
this.inputElement.current.focus();
​
// 这里是函数组件的写法
​
import React from 'react'   // 子组件
export default function Son(props) {
    return (
        <div>
            <h2 ref={props.testRef}>Son com</h2>
        </div>
    )
}
​
import React, { Component, useState } from 'react'  // 父组件
import { Fragment } from 'react'
import Son from "../son";
export default function Start() {
    const [state, setState] = useState({
        // inputElement: React.createRef()
    })
    const click = () => {
        console.log(ref.current.innerHTML);
    }
    const ref = React.createRef()
    return (
        <Fragment>
            <div>123123</div>
            <button onClick={click}>click</button>
            <Son testRef={ref}></Son>
        </Fragment>
    )
}

路由置以及加载中提示

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
​
const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));
​
const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
      </Switch>
    </Suspense>
  </Router>
);

Render Props

class Cat extends React.Component {
  render() {
    const mouse = this.props.mouse;
    return (
      <img src="/cat.jpg" style={{ position: 'absolute', left: mouse.x, top: mouse.y }} />
    );
  }
}
​
class MouseWithCat extends React.Component {
  constructor(props) {
    super(props);
    this.handleMouseMove = this.handleMouseMove.bind(this);
    this.state = { x: 0, y: 0 };
  }
​
  handleMouseMove(event) {
    this.setState({
      x: event.clientX,
      y: event.clientY
    });
  }
​
  render() {
    return (
      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>
​
        {/*
          我们可以在这里换掉 <p> 的 <Cat>   ......
          但是接着我们需要创建一个单独的 <MouseWithSomethingElse>
          每次我们需要使用它时，<MouseWithCat> 是不是真的可以重复使用.
        */}
        <Cat mouse={this.state} />
      </div>
    );
  }
}
​
class MouseTracker extends React.Component {
  render() {
    return (
      <div>
        <h1>移动鼠标!</h1>
        <MouseWithCat />
      </div>
    );
  }
}

生命周期函数

挂载

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

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

更新

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

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

卸载

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

• componentWillUnmount()

错误处理

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

• static getDerivedStateFromError()
• componentDidCatch()