loading代码_从 loading 的 9 种写法谈 React 业务开发

前言

这是一篇比较全面讲解 React 的文章，里面很多基础知识希望你自己一边查阅资料一边学习。全文从业务开发中最常用见 loading 效果不同是实现讲起，说下现在前端开发在业务上应该有的思考。

入门级操作

State

最简单的实现，我们在 Loading 组件内部声明一个状态，通过代码逻辑判断 loading 效果的展示。

export default class extends Component { ... render() { return this.state.loading ? : finish; }}

完整演示

Props

随着业务的发展，这个 Loading 组件用到的地方会非常多，上面这个代码耦合了很多逻辑，为了让这个组件能够很好的复用，那我们抽离出组件的业务逻辑，将内部状态进行提升，那这个组件就是一个能被复用的 UI 组件。

export default function(props) { return props.loading ? : finish;}

完整演示

注：上面两段代码你可能会想，为什么 Func 和 Class 都能实现一个组件，他们有什么差别吗？

其实你在开发时不容易感觉到差别，但 React 本身是进行了很多差别处理，如果是 Class 类，React 会用 new 关键字实例化，然后调用该实例的 render 方法，如果是 Func 函数，React 会直接调用它。

Refs

如果你是一个 jQuery 转型 React 的开发，会很自然的想到，我找到 Loading 组件的节点，控制他的显示与隐藏，当然这也是可以的，React 提供 Refs 方便你访问 DOM 节点 或 React 元素。

export default class extends Component { componentDidMount() { fetch().then(() => { this.el.changeLoading(false); }); } render() { return ( { this.el = el; }} /> ); }}

完整演示

通用逻辑抽离

当你的应用做到一定的复杂度，不同的页面都会有 loading 效果，你肯定不希望每个页面都重复的书写一样的逻辑，这样会导致你的代码重复且混乱。

React 中有两个比较常见的解决方案 HOC 和 Render Props，其实这两个这两个概念都是不依赖 React 的。

让我们暂时忘掉 React，下面我对 HOC 和 Render Props 写两个例子，你会发现组件复用是如此简单。

HOC

HOC 其实就是一种装饰器模式，它接受一个组件作为参数，然后返回相同的组件，这样就可以额外增加一些功能。

const func = () => { console.log("func");};const wrap = func => { console.log("wrap"); return func;};// wrap 逻辑已被复用wrap(func)();

完整演示

Render Props

Render Props 就是我们给一个函数传递一个回调函数做为参数，该回调函数就能利用外面函数的执行结果做为参数，执行任何操作。

const func = param => { console.log("func");};const wrap = (param, func) => { console.log("wrap"); func(param);};// wrap 逻辑已被复用wrap(