react中的组件——Component、PureComponent、functionComponent

2019年10月18日 28 字大概 1 分钟

React 哲学

组合优于继承

class Component

function Component

PureComponent

组件库中组件的设计

stateLess
常用样式尽量少

在 React 中使用 mobx 进行状态管理

2019年10月14日 405 字大概 2 分钟

observable
inject
computed
action

autorun
RunInAction
Reaction

尽量使用箭头函数

调试

toJS 需要引入 => 不如直接 JSON.stringify()方便

不用使用数组索引或者任何将来可能会改变的值作为 key 。如果需要的话为你的对象生成 ids。

参考技巧

var array = [{name:'武汉'}, {name: '北京'}, {name:'上海'}, {name:'天津'}];
var resultArray = array.sort(
    function compareFunction(param1, param2) {
        return param1.name.localeCompare(param2.name,"zh");
    }
);
console.log(resultArray);

根据现有的状态或其它计算值衍生出的值，响应式的产生一个可以被其它 observer 使用的值

import {observable, computed} from "mobx";

class OrderLine {
    @observable price = 0;
    @observable amount = 1;

    constructor(price) {
        this.price = price;
    }
  // computed 不支持箭头函数的写法
    @computed get total() {
        return this.price * this.amount;
    }
}

想不产生一个新值，而达到一个效果，请使用 autorun。举例来说，效果是像打印日志、发起网络请求等这样命令式的副作用。

autorun 中的值必须要手动清理才行

// 请求底部的 table Plan 绑定数据
@action fetchShopPlanList = (): ActionResponse => {
    const [begin, end] = this.dateRange;
    return http
        .post(ApiBaseinfo_Admin_Restaurant_restaurantID_menuCalendarByDateRange, {
            ':restaurantID': globalStore.currentShopID,
            begin,
            end,
        })
        .then(({ error, data }) => {
            if (error) {
                return { error };
            }

            runInAction(() => {
                const { menuCalendarList } = data;
                // 遍历筛选绑定菜单项
                this.boundObj = menuCalendarList.reduce((preObj, mealPlan) => {
                    const { color, name, date } = mealPlan;
                    if (color) {
                        preObj[`${date}_${name}`] = color;
                    }

                    return preObj;
                }, {});
                // 在一个请求的 action中直接去修改 state,可能会存在mobx 检测不到的情况，需要包裹 runInAction
                this.shopCalendarList = data.menuCalendarList;
            });

            return { data };
        });
};

React-router V4

2019年08月21日 234 字大概 1 分钟

React 创建的单页应用中、通过路由来控制页面间的跳转，常用的就是 react-router、react-router-dom

React Router中有三类组件

路由组件 BrowserRouter, HashRouter
路由匹配组件 Route, Switch
导航、链接组件 Link

基于 React Router 的 web 应用，根组件应该是一个 router 组件（BrowserRouter，HashRouter ）。项目中，react-router-dom 提供了和两种路由。两种路由都会创建一个 history 对象。如果我们的应用有服务器响应 web 的请求，我们通常使用组件; 如果使用静态文件服务器，则我们应该使用组件通常都是使用

Demo

Link 组件最终会渲染为 HTML 标签，它的 to、query、hash 属性会被组合在一起并渲染为 href 属性。虽然 Link 被渲染为超链接，但在内部实现上使用脚本拦截了浏览器的默认行为，然后调用了history.pushState 方法

react-redux中Provider、connect

2019年07月29日 5 字大概 1 分钟

react-redux中Provider

详情