react 16.8.2 最新特性 react-hooks 介绍与应用。

REACT与函数式编程

从发布最初,react就高举函数式编程的大旗。但最最核心的组件化确是用ES6的伪造类Class完成的。开发过程中明显的感觉得到,这是面向对象的编程风格。现在好了,开发的趋势是组件可以不用class完成,而是改用函数组件来编写我们的应用了。

Counter组件重写

套用程墨菊苣在知乎上的例子,以前我们的class类组件的counter,就可以改写成下面的例子

const Counter = () => {
  const [count,setCount] = useState(0);
  return (
    
{count}
); };

hooks的出现,让redux 和 mobx 这样的第三方状态管理工具可有可无了

hooks的useState无论调用多少次,无论在哪个组件如何调用,互相之间都是独立的。如何独立的呢?react要求useState只能在react组件函数一级的scope里,不能放在if-else里,不能放在循环体里,因为react要根据useState的调用顺序来管理状态。

const [ foo,updateFoo] = useState("bar");

上面的代码,useState返回的结果其实是一个俩元素的数据,第一个元素是状态,相当于之前的this.state.foo,第二个元素是改变这个状态的函数,相当于之前的this.setState(...)。
useState毫无「状态名」的概念,状态名和改变状态的函数,都是我们自己的代码确定的,上面的代码完全可以这么写。

const [ so,whatever] = useState("bar");

然后so变量就是bar了,whatever就是改变so的函数了。
因为useState没有状态名的概念,所以完全靠调用顺序[记住]哪个状态对应哪个变量。
可以想象,如下面这样编写代码,肯定玩完。

const Counter = ()=>{
  if(condition){
    const [count,setCount] = userState(0);
    const [foo,updateFoo] = useState("bar");
}else{
    const [foo,updateFoo] = useState("bar");
    const [count,setCount] = useState(0);
  }
return(
  
{count}
); };

上面两个useState的调用顺秀随着condition变化,这么不行。

为什么引入hooks

为了解决react开发中出现的各种关于组件的问题

  1. 难以重用或共享组件中关于状态(state)相关的逻辑.
  2. 逻辑复杂的组件难以开发和维护,当我们的组件需要处理多个复杂的不相关的local state的时候每个生命周期函数中可能会包含着各种互不相关的逻辑在里面。
  3. 类组件中的this增加了学习成本,类组件在基于现有工具的优化上存在诸多问题。
  4. 由于业务变动,函数组件不得不改为类组件等。

为了进一步了解hooks,我们先来了解一下hooks的用法。

快速了解react hooks的使用

hooks让函数组件拥有了类组件的特性,比如local state(状态),lifeCircle(生命周期),而且还解决了上面提到的一系列问题。下面来一一指出。
首先是hooks的使用,这里主要讲2个hooks:useState和useEffect。

import {useState,useEffect} from "react";
function example(){
  // count是名 setCount是一个函数 他们随便定义成什么名字都可以
  const [count,setCount] = useState(0);
  //useEffect参数是一个函数
  useEffect(()=>{
    document.title = `You clicked ${count} times`;
  });
  return (
    

{count}

) }

useState

useState这个方法可以给我们的函数组件带来local state,让函数组件拥有状态的概念,它接收一个初始的state值,返回一对变量

const [count,setCount] = useState(0);
//等价于
var count = useState(0)[0]; //该state
var setCount = useState(0)[1];//修改state的方法

useEffect

useEffect可以利用我们组件中的local state 进行一些带有副作用的操作

//在useEffect里面可以获取到local state
useEffect(()=>{
  document.title = `You clicked ${count} times`;
});

useEffect里面还可以通过传入第二个参数来决定是否执行里面的操作来避免一些不必要的性能损失,只要第二个参数数组中的成员的值没有改变,就会跳过此次执行,如果传入一个空数组,[],那么该effect只会在组件mount和unmount时期执行。

useEffect(()=>{
  document.title = `You clicked ${count} times`;
},[count]);

useEffect中还可以通过让函数返回一个函数来进行一些清理操作(clean up),比如取消订阅等。

useEffect(() => {
  api.subscribe(theId);
  return () => {
      api.unsubscribe(theId)    //clean up
  }
});

useEffect什么时候执行呢?它会在组件mount和unmount以及每次重新渲染的时候都会执行,也就是会在componentWillMount,componentDidMount,componentDidUpdata这3个时期执行。
清理函数(clean up)什么时候执行呢?其在前一次effect执行后,下一次effect将要执行前,以及Unmount时期执行。

注意事项

我们只能在 函数组件 中使用 Hooks,我们也可以在一个组件中使用多组 Hooks。比如:

function FriendStatusWithCounter(props) {
  const [count, setCount] = useState(0);
  useEffect(() =>{
    document.title = `You clicked ${count} times`;
  });

  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {
    API.subscribe(props.friend.id);
    return () => {
      API.unsubscribe(props.friend.id);
    };
  });

  return isOnline
}

值得注意的是,我们只能在顶层代码(top level)中调用hooks,不能再循环或者判断语句中调用,这样是为了让我们的hooks在每次渲染的时候都会按照相同的顺序调用,因为这里有一个跟关键词的问题,那就是useState需要依赖参照第一次渲染的调用顺序来匹配对应的state,否则,useState会无法正确返回其对应的state。

hooks解决的问题。

知道了 Hooks 基本使用后,我们就可以来了解 Hooks 是怎么解决 react 长期存在的问题的。

  1. 如何解决 状态有关的逻辑(stateful logic) 的重用和共享问题
    过去对于类似问题的解决方案主要有两个:
  • Render Props 通过props接受一个返回react element的函数,来动态决定自己要渲染的结果;
(
  

Hello,{data.target}

)}>
  • 还有就是Higher-Order Components 高阶组件,以一种类似 工厂模式 的方式去生产出具有相同或类似逻辑的组件。
function getComponent(WrappedComponent) {

  return class extends React.Component {
    constructor(props) {
      super(props);
    }
    componentDidMount() {
      // doSomething
    }
    componentWillUnmount() {
      // doSomething
    }
    render() {
      return ;
    }
  };
}

但无论是哪种方法都会造成组件数量增多,还有组件树结构的更改,而且还有可能出现嵌套地狱。现在custom hooks可以解决这个问题。

custom hooks

custom hooks并不是一个api,而是一个规则。具体实现就是通过一个函数来封装跟状态有关的逻辑,将这些逻辑从组件中抽离出来,在这个函数中我们可以使用其他的hooks,也可以单独进行测试,甚至将他贡献给社区。

import { useState, useEffect } from 'react';

function useCount() {
  const [count, setCount] = useState(0);
  useEffect(() =>{
    document.title = `You clicked ${count} times`;
  });
  
  return count
}

比如上面的一个例子,他就是一个custom hooks,提取了对count的操作。这里需要遵循一个约定,命名要用use *,这是为了方便我区分,利于我们维护。可以看到它其实就是一个函数,我们可以在现有的所有其他组件引用他。

function CountStatus(){
  // 比如这里的useCount 就是用use命名。
  const count = useCount();
  return count;
}

这里的核心概念就是将逻辑提取出来封装到custom hooks里,然后可以在任何其他组件中共享这部分逻辑。也可以贡献给社区。所以我们可以预见,将来会有更多充满想象力的custom hooks出现,极大地提高我们的开发效率。

hooks 具有复杂逻辑的组件的开发和维护

我们的组件可能会随着开发的进行变得越来越复杂,要处理越来越多的 local State,那么在组件的生命周期函数中就会充斥着各种互不相关的逻辑,这里需要引入官方的比较复杂的例子,先看基于以前类组件的情况:

class FriendStatusWithCounter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
      count: 0, 
      isOnline: null 
    };
    this.handleStatusChange = this.handleStatusChange.bind(this);
  }

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
    ChatAPI.subscribeToFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

  componentWillUnmount() {
    ChatAPI.unsubscribeFromFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

  handleStatusChange(status) {
    this.setState({
      isOnline: status.isOnline
    });
  }
  // ...

经过 Hook 改造后:

function FriendStatusWithCounter(props) {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }
  // ...
}

状态和相关的处理逻辑可以按照功能来划分,不必散落在各个生命周期之中,大大降低了开发和维护的难度。除了这几个hooks还有其他几个hooks,在此继续了解 Hooks API Reference。

你可能感兴趣的:(react 16.8.2 最新特性 react-hooks 介绍与应用。)