蒸汽博客

Appearance

On this page

高阶函数-函数的柯里化 ​

高阶函数是指至少满足下列条件之一的函数：

  • 接受一个或多个函数作为输入
  • 输出一个函数

柯里化是指将一个接受多个参数的函数转换成一个接受单个参数的函数，并且返回接受余下的参数而且返回结果的新函数的技术。

js
// 柯里化前
function add(x, y) {
  return x + y
}
add(1, 2) // 3
js
// 柯里化后
function addX(y) {
  return function (x) {
    return x + y
  }
}
addX(2)(1) // 3

柯里化在React中的应用 ​

js
class Login extends Component {
  constructor(props) {
    super(props)
    this.state = {
      username: '',
      password: ''
    }
  }
  handleChange = (key) => {
    return (e) => {
      this.setState({
        [key]: e.target.value
      })
    }
  }
  render() {
    return (
      <div>
        <input type="text" onChange={this.handleChange('username')} />
        <input type="password" onChange={this.handleChange('password')} />
      </div>
    )
  }
}

通过函数柯里化，实现代码的复用，减少代码量。

React生命周期（旧） ​

constructor: 构造函数，最先被执行，我们通常在构造函数里初始化state对象或者给自定义方法绑定this。

componentWillMount: 组件将要挂载，执行render方法前，我们通常在这个函数里面执行组件的启动依赖项，比如，通过Ajax请求数据等。

render: 渲染函数，当render函数被调用时，它会检查this.props和this.state并返回以下类型之一：React元素、数组或者fragments、Portals、字符串和数字、Boolean或null等内容。

componentDidMount: 组件挂载完成，此时我们可以获取到DOM节点并操作，比如对canvas，svg的操作，服务器请求，订阅都可以写在这个里面，但是记得在componentWillUnmount中取消订阅。

componentWillReceiveProps: 组件将要接收到属性，属性改变时执行，初始化render时不执行。子组件初始化并不会调用该钩子

shouldComponentUpdate: 通过this.setState()触发，组件是否应该更新，返回布尔值，优化点。

componentWillUpdate: 组件将要更新，shouldComponentUpdate返回true后，进入这个生命周期，我们在这里可以拿到nextProps和nextState，即更新前的属性和状态，此时不要更新状态，否则会导致循环调用导致栈溢出，可以在这里做一些组件更新发生前的准备工作。

componentDidUpdate: 组件更新完成，此时我们可以获取dom节点并操作dom，比如手动输入焦点。

componentWillUnmount: 组件将要卸载，此时我们可以做一些组件清理工作，比如清理定时器，取消Redux订阅等。可以通过ReactDOM.unmountComponentAtNode卸载指定节点，组件从页面中删除的时候调用。

挂载阶段 ​

  1. constructor
  2. componentWillMount
  3. render
  4. componentDidMount
  5. componentWillUnmount

更新阶段 ​

  1. componentWillReceiveProps
  2. shouldComponentUpdate
  3. componentWillUpdate
  4. render
  5. componentDidUpdate
  6. componentWillUnmount

更新State阶段 ​

  1. setState()
  2. shouldComponentUpdate
  3. componentWillUpdate
  4. render
  5. componentDidUpdate
  6. componentWillUnmount

强制更新阶段 ​

  1. forceUpdate()
  2. componentWillUpdate
  3. render
  4. componentDidUpdate
  5. componentWillUnmount

React生命周期（新） ​

下列信息引用自ChatGPT

在 React 中，自 16.3 版本开始，React 官方宣布了一系列生命周期方法的废弃和更新。 具体而言，以下是一些生命周期方法的变化情况：

  1. componentWillMount 和 componentWillReceiveProps：这两个生命周期方法从 React 16.3 版本开始被废弃。 它们被认为是不安全和容易出错的方法，因为在异步渲染中可能会被调用多次。 React 建议使用其他替代方法来代替这两个生命周期。componentWillMount 可以使用 constructor 或 componentDidMount 来替代，componentWillReceiveProps 可以使用 componentDidUpdate 来替代。
  2. componentWillUpdate：从 React 16.3 版本开始被废弃。这个方法同样被认为是不安全的，并且可能在异步渲染中被调用多次。可以使用 componentDidUpdate 来替代。
  3. componentDidMount：虽然 componentDidMount 仍然被支持，但在 React 17 版本中引入了新的生命周期方法 componentDidMount 的异步版本 componentDidMount。新的异步版本不再同步调用，在异步渲染中可以更好地控制副作用和性能。
  • 除了上述生命周期方法的变化，React 16.8 版本引入了 React Hooks，这是一种新的方式来管理组件的状态和副作用，使得函数式组件也可以拥有类似类组件的特性。 使用 React Hooks，你可以在函数式组件中使用 useState、useEffect 等钩子函数来处理状态和副作用，不再需要使用类式组件的生命周期方法。 虽然 React 官方已经宣布废弃一些生命周期方法，但这些方法目前仍然可以正常使用，只是在未来的版本中可能会被彻底移除。 因此，为了未来的兼容性和可维护性，建议尽量使用新的生命周期方法或者使用 React Hooks 来管理组件的状态和副作用。

React Hooks ​