Hytale之我见 专注hytale服务器技术

react hooks到底是什么?

2019-10-22
hytaleme

关于react hooks的个人思考

先看两段代码:

java:

public class Demo {
    /**
     * 变量
     */
    public String state;

    /**
     * 构造函数
     */
    public Demo(String param1, String param2) {
    }

    /**
     * 方法
     */
    public void method() {
        //做一些事
    }
}

js:

export default function useDemo(param1, param2) {
  /**
   * 变量
   */
  const [state, setState] = useState()

  /**
   * 方法
   */
  const method = useCallback(() => {
    //做一些事
  }, [])

  return {state, method}
}

面向对象

其实,hooks就是类似面向对象的封装。 所谓封装,顾名思义就是把相关的变量逻辑写在一起,在java里是类,在hooks的角度就是hook函数。

封装体接受输入,产生输出,逻辑在内部处理。

在java里,new实例时,输入从构造函数传入,输出就是你可以访问实例暴露的变量与方法,私有方法可以包含业务逻辑;在hooks里,调用函数可以输入参数,函数返回可以返回想要暴露的变量与方法,函数内部可以包含业务逻辑,跟java一样一样的,虽然实现方式比较新奇。

全局状态

hooks这种奇怪的调用方式,没法实现全局状态! 变量最终都是用useState()来实现的,你需要配合使用比如redux来实现全局状态。 奇怪的方式毕竟会有不足~

与js的new方式比较

export default function Demo(param1, param2) {
  /**
   * 变量
   */
  this.name = param1

  /**
   * 方法
   */
  this.method = () => {
    //做一些事
  }
}

使用时new Demo()生成实例,这种方法看着跟java更接近,输入输出内部逻辑也都正常。 但最大区别在于,hooks方式你不需要用到this这个磨人的小妖精了!可以节省脑细胞不用去思考this是否会产生bug。这跟java里的this不同,在java里使用this并不会有任何可能产生误解的地方。 而且hooks有自己的使用方式,并不能用这种方式替代。

限制

用hooks,你要遵守它独特的写法,不能当做普通的js随心所欲地写,比如:

  1. 内部方法要用useMemo()useCallback(),而不能直接定义!
  2. 内部耗时的变量要用useMemo()记录下来,避免每次调用都重新计算!
  3. 成员变量用useState(),局部变量可以简单的用let/const

上一篇 java远程调试

目录