为什么我推荐 Antd Pro + Umi

Photo by Vincent van Zalinge on Unsplash

React 生态很神,套娃框架很丰富,比如 antd pro 组件库和 umi 开发框架。这段时间,经过深度的使用,我对这个框架的也越来越喜爱。因为它解决了独立开发者最关心的效率和代码质量的问题。

效率很好理解,代码质量可能有人有些疑问,一般的理解是代码质量可能是多人协作需要考虑的事情,实则不然,根据我独立开发多年的经验,作为独立开发者,很多时候无法知道自己代码是被合理的组织的。如果任凭代码随意组织,在后面迭代中也会影响业务上线效率。

为了解决这个问题,我往往需要看别人的代码学习一些经验,这个会耗费比较多的时间。而 umijs 从阿里的业务中提取除了很好的实践,使用插件和配置形式很好的组织了前端代码,让开发更加关注业务本身。

React 状态机使用感受

Photo by erik cid on Unsplash

上手 react antd 之后,按照官方推荐的套娃框架 umi 和 antd pro 配合搭建了目前的项目。其中 umi 又可以使用 dva 状态管理框架进行数据流管理。

一开始我的认为是这个东西比较麻烦使用起来不太顺手,并且解决不了什么问题。但是现实是在我的项目里有很多组件共用的数据,不用状态管理会让代码显得非常冗余。学习了 dva 之后发现套娃框架非常适合上手,也精简了不少代码。

状态管理的核心是拆分状态。一开始我综合了知乎的一些回答,认为若组件之间有大量的共享数据,那么就可以使用状态机管理数据可以精简非常多的代码。

产品随想

最近痴迷曾国藩传,试想读一些近代史相关的书籍,但是发现手头没有相关产品的。作为用户,我希望有一款可以输入一本书然后关联出所有相关知识点的工具,类似知识图谱。

这个工具比较适合 Web 大屏幕来展现。

暂时那么多。

哦又是this——浅谈 React 事件绑定

Photo by Jeremy Zero on Unsplash

在使用 React JSX 事件绑定中有个最大的问题是它不会帮你处理 this 的指向问题。我刚刚上手的时候有些疑惑,看了教程之后豁然开朗。

React 事件绑定的需要和显示的修改对应事件处理函数的 this 的值。这主要是因为 Babel 开启了严格模式。若这个函数 this 指向没有改变,直接赋值给 onClick,那么函数体内的 this 仍是 undefined 。为此需要使用 bind 函数来修改函数体内的 this 指向。比如下面这段代码 :

import React, { Component } from "react";

class test extends Component {
  test() {}
  render() {
    return <div onClick="this.test.bind(this)"></div>;
  }
}

export default test;

对于一个类组件,this 指向的是类的实例,this.test 方法会沿着原型链找到类中定义的 test 方法,然后将这个类方法中的 this 替换为当前实例对象。这样一来, test 方法中的 this 就可以当前实例对象的值。

另一种方法是将 test 写出箭头函数的形式。这里有两个含义。首先 test = func 的形式,test 就是一个实例属性,但是这样仍然没有改变这个直接调用时函数内部的 this 的指向。但是假如写成箭头函数的形式,箭头函数中的 this 会使用实例对象的 this,如下所示。

import React, { Component } from "react";

class test extends Component {
  test = () => {};
  render() {
    return <div onClick="this.test.bind(this)"></div>;
  }
}

export default test;

对应视频教程

bind https://www.bilibili.com/video/BV1wy4y1D7JT?p=16

箭头函数 https://www.bilibili.com/video/BV1wy4y1D7JT?p=18