Bobi.ink
2019-05-15
在 React 的世界里”一切都是组件“, 组件可以映射作函数式编程中的函数,React 的组件和函数一样的灵活的特性不仅仅可以用于绘制 UI,还可以用于封装业务状态和逻辑,或者非展示相关的副作用, 再通过组合方式组成复杂的应用. 本文尝试解释用 React 组件的思维来处理常见的业务开发场景.
系列目录
目录
响应式
编程在很长一段时期里,高阶组件都是增强和组合 React 组件的最流行的方式. 这个概念源自于函数式编程的高阶函数. 高阶组件可以定义为: 高阶组件是函数,它接收原始组件并返回原始组件的增强/填充版本:
const HOC = Component => EnhancedComponent;
首先要明白我们为什么需要高阶组件:
React 的文档说的非常清楚, 高阶组件是一种用于复用组件逻辑模式. 最为常见的例子就是 redux 的connect
和 react-router 的 withRouter
. 高阶组件最初用于取代 mixin(了解React Mixin 的前世今生). 总结来说就是两点:
高阶组件的一些实现方法主要有两种:
属性代理(Props Proxy)
: 代理传递给被包装组件的 props, 对 props 进行操作. 这种方式用得最多. 使用这种方式可以做到:- 操作 props
- 访问被包装组件实例
- 提取 state
- 用其他元素包裹被包装组件
- 渲染劫持: 即控制被包装组件的渲染输出.
- 操作 state: state 一般属于组件的内部细节, 通过继承的方式可以暴露给子类. 可以增删查改被包装组件的 state, 除非你知道你在干什么, 一般不建议这么做.
实际上高阶组件能做的不止上面列举的, 高阶组件非常灵活, 全凭你的想象力. 读者可以了解 recompose这个库, 简直把高阶组件玩出花了.
总结一下高阶组件的应用场景:
高阶组件相关文档在网上有很多, 本文不打算展开描述. 深入了解高阶组件
高阶组件的一些规范:
WithSubscription(${getDisplayName(WrappedComponent)})
; return WithSubscription; } function getDisplayName(WrappedComponent) { return WrappedComponent.displayName || WrappedComponent.name || 'Component'; } Render Props(Function as Child) 也是一种常见的 react 模式, 比如官方的 Context API 和 react-spring 动画库. 目的高阶组件差不多: 都是为了分离关注点, 对组件的逻辑进行复用; 在使用和实现上比高阶组件要简单, 在某些场景可以取代高阶组件. 官方的定义是:
是指一种在 React 组件之间使用一个值为函数的 prop 在 React 组件间共享代码的简单技术
React 并没有限定任何 props 的类型, 所以 props 也可以是函数形式. 当 props 为函数时, 父组件可以通过函数参数给子组件传递一些数据进行动态渲染. 典型代码为:
<FunctionAsChild>{() => <div>Hello,World!</div>}</FunctionAsChild>
使用示例:
<Spring from={{ opacity: 0 }} to={{ opacity: 1 }}>
{props => <div style={props}>hello</div>}
</Spring>
某种程度上, 这种模式相比高阶组件要简单很多, 不管是实现还是使用层次. 缺点也很明显:
再开一下脑洞. 通过一个 Fetch 组件来进行接口请求:
<Fetch method="user.getById" id={userId}>
{({ data, error, retry, loading }) => (
<Container>
{loading ? (
<Loader />
) : error ? (
<ErrorMessage error={error} retry={retry} />
) : data ? (
<Detail data={data} />
) : null}
</Container>
)}
</Fetch>
在 React Hooks 出现之前, 为了给函数组件(或者说 dumb component)添加状态, 通常会使用这种模式. 比如 react-powerplug
官方文档
大部分情况下, 组件表示是一个 UI 对象. 其实组件不单单可以表示 UI, 也可以用来抽象业务对象, 有时候抽象为组件可以巧妙地解决一些问题.
举一个例子: 当一个审批人在审批一个请求时, 请求发起者是不能重新编辑的; 反之发起者在编辑时, 审批人不能进行审批. 这是一个锁定机制, 后端一般使用类似心跳机制来维护这个’锁’, 这个锁可以显式释放,也可以在超过一定时间没有激活时自动释放,比如页面关闭. 所以前端通常会使用轮询机制来激活锁.
一般的实现:
class MyPage extends React.Component {
public componentDidMount() {
// 根据一些条件触发, 可能还要监听这些条件的变化,然后停止加锁轮询. 这个逻辑实现起来比较啰嗦
if (someCondition) {
this.timer = setInterval(async () => {
// 轮询
tryLock();
// 错误处理,可以加锁失败...
}, 5000);
}
}
public componentWillUnmount() {
clearInterval(this.timer);
// 页面卸载时显式释放
releaseLock();
}
public componentDidUpdate() {
// 监听条件变化,开始或停止锁定
// ...
}
}
随着功能的迭代, MyPage 会变得越来越臃肿, 这时候你开始考虑将这些业务逻辑抽取出去. 一般情况下通过高阶组件或者 hook 来实现, 但都不够灵活, 比如条件锁定这个功能实现起来就比较别扭.
有时候考虑将业务抽象成为组件, 可能可以巧妙地解决我们的问题, 例如 Locker:
/**
* 锁定器
*/
const Locker: FC<{ onError: err => boolean, id: string }> = props => {
const {id, onError} = props
useEffect(() => {
let timer
const poll = () => {
timer = setTimeout(async () => {
// ...
// 轮询,处理异常等情况
}, 5000)
}
poll()
return () => {
clearTimeout(timer)
releaseLock()
}
}, [id])
return null
};
使用 Locker
render() {
return (<div>
{someCondition && <Locker id={this.id} onError={this.handleError}></Locker>}
</div>)
}
这里面有一个要点:我们将一个业务抽象为了一个组件后,业务逻辑有了和组件一样的生命周期。现在组件内部只需关心自身的逻辑,比如只关心资源请求和释放(即 How),而何时进行,什么条件进行(即 When)则由父级来决定, 这样就符合了单一职责原则。 上面的例子父级通过 JSX 的条件渲染就可以动态控制锁定, 比之前的实现简单了很多
个人觉得 hooks 对于 React 开发来说是一个革命性的特性, 它改变了开发的思维和模式. 首先要问一下, “它解决了什么问题? 带来了什么新的东西?”
hooks 首先是要解决高阶组件或者 Render Props 的痛点的. 官方在’动机‘上就说了:
- 将状态逻辑从组件中脱离, 让他可以被单独的测试和复用.
- hooks 可以在组件之间共享, 不会影响组件的结构
Hooks 带来的新东西: hook 旨在让组件的内部逻辑组织成可复用的更小单元,这些单元各自维护一部分组件‘状态和逻辑’。
图片来源于twitter(@sunil Pai)
- **从某种程度上看组件和 hooks 是同质的(都包含状态和逻辑)**. 统一使用函数形式开发, 这使得你不需要在类、高阶组件或者 renderProps 上下文之间切换, 降低项目的复杂度. 对于 React 的新手来说,各种高阶组件、render props 各种概念拉高了学习曲线
- **函数是一种最简单的代码复用单元, 最简单也意味着更灵活**。相比组件的 props,函数的传参更加灵活; 函数也更容易进行组合, hooks 组合其他 hook 或普通函数来实现复杂逻辑.
- **本质上讲,hooks 就是给函数带来了状态的概念**
一个示例: 无限加载列表
一般 hooks 的基本代码结构为:
function useHook(options) {
// ⚛️states
const [someState, setSomeState] = useState(initialValue);
// ⚛️derived state
const computedState = useMemo(() => computed, [dependencies]);
// ⚛️refs
const refSomething = useRef();
// ⚛️side effect
useEffect(() => {}, []);
useEffect(() => {}, [dependencies]);
// ⚛️state operations
const handleChange = useCallback(() => {
setSomeState(newState)
}, [])
// ⚛️output
return <div>{...}</div>
}
自定义 hook 和函数组件的代码结构基本一致, 所以有时候hooks 写着写着原来越像组件, 组件写着写着越像 hooks. 我觉得可以认为组件就是一种特殊的 hook, 只不过它输出 Virtual DOM.
一些注意事项:
总结 hooks 的常用场景:
学习 hooks:
响应式
编程Vue
的非侵入性响应式系统是其最独特的特性之一, 可以按照 Javascript 的数据操作习惯来操作组件状态, 然后自动响应到页面中. 而 React 这边则提供了 setState, 对于复杂的组件状态, setState 会让代码变得的又臭又长. 例如:
this.setState({
pagination: {
...this.state.pagination,
current: defaultPagination.current || 1,
pageSize: defaultPagination.pageSize || 15,
total: 0,
},
});
后来有了mobx, 基本接近了 Vue 开发体验:
@observer
class TodoView extends React.Component {
private @observable loading: boolean;
private @observable error?: Error;
private @observable list: Item[] = [];
// 衍生状态
private @computed get completed() {
return this.list.filter(i => i.completed)
}
public componentDidMount() {
this.load();
}
public render() {
/// ...
}
private async load() {
try {
this.error = undefined
this.loading = true
const list = await fetchList()
this.list = list
} catch (err) {
this.error = err
} finally {
this.loading = false
}
}
}
其实 mobx 也有挺多缺点:
- Observable 数组并非真正的数组. 比如 antd 的 Table 组件就不认 mobx 的数组, 需要传入到组件之间使用 slice 进行转换
- 向一个已存在的 observable 对象中添加属性不会被自动捕获
于是 hooks 出现了, 它让组件的状态管理变得更简单直接, 而且它的思想也很接近 mobx 响应式编程哲学:
状态 是驱动应用的数据. 例如 UI 状态或者业务领域状态
function Demo() {
const [list, setList] = useState<Item[]>([]);
// ...
}
任何 源自状态并且不会再有任何进一步的相互作用的东西就是衍生。包括用户视图, 衍生状态, 其他副作用
function Demo(props: { id: string }) {
const { id } = props;
// 取代mobx的observable: 获取列表, 在挂载或id变动时请求
const [value, setValue, loading, error, retry] = usePromise(
async id => {
return getList(id);
},
[id],
);
// 衍生状态: 取代mobx的computed
const unreads = useMemo(() => value.filter(i => !i.readed), [value]);
// 衍生副作用: value变动后自动持久化
useDebounce(
() => {
saveList(id, value);
},
1000,
[value],
);
// 衍生视图
return <List data={value} onChange={setValue} error={error} loading={loading} retry={retry} />;
}
所以说 hook 是一个革命性的东西, 它可以让组件的状态数据流更加清晰. 换做 class 组件, 我们通常的做法可能是在 componentDidUpdate
生命周期方法中进行数据比较, 然后命令式地触发一些方法. 比如 id 变化时触发 getList, list 变化时进行 saveList.
hook 似乎在淡化组件生命周期的概念, 让开发者更专注于状态的关系, 以数据流的方式来思考组件的开发. Dan Abramov在编写有弹性的组件也提到了一个原则”不要阻断数据流”, 证实了笔者的想法:
无论何时使用 props 和 state,请考虑如果它们发生变化会发生什么。在大多数情况下,组件不应以不同方式处理初始渲染和更新流程。这使它能够适应逻辑上的变化。
读者可以看一下awesome-react-hooks, 这些开源的 hook 方案都挺有意思. 例如rxjs-hooks, 巧妙地将 react hooks 和 rxjs 结合的起来:
function App(props: { foo: number }) {
// 响应props的变动
const value = useObservable(inputs$ => inputs$.pipe(map(([val]) => val + 1)), 200, [props.foo]);
return <h1>{value}</h1>;
}
就如 react 官方文档说的: “我们的 React 使用了数以千计的组件,然而却还未发现任何需要推荐你使用继承的情况。”, React 偏向于函数式编程的组合模式, 面向对象的继承实际的应用场景很少.
当我们需要将一些传统的第三方库转换成 React 组件库时, 继承就可能派上用场. 因为这些库大部分是使用面向对象的范式来组织的, 比较典型的就是地图 SDK. 以百度地图为例:
百度地图有各种组件类型: controls, overlays, tileLayers. 这些类型都有多个子类, 如上图, overlay 有 Label, Marker, Polyline 等这些子类, 且这些子类有相同的生命周期, 都是通过 addOverlay 方法来渲染到地图画布上. 我们可以通过继承的方式将他们生命周期管理抽取到父类上, 例如:
// Overlay抽象类, 负责管理Overlay的生命周期
export default abstract class Overlay<P> extends React.PureComponent<OverlayProps & P> {
protected initialize?: () => void;
// ...
public componentDidMount() {
// 子类在constructor或initialize方法中进行实例化
if (this.initialize) {
this.initialize();
}
if (this.instance && this.context) {
// 渲染到Map画布中
this.context.nativeInstance!.addOverlay(this.instance);
// 初始化参数
this.initialProperties();
}
}
public componentDidUpdate(prevProps: P & OverlayProps) {
// 属性更新
this.updateProperties(prevProps);
}
public componentWillUnmount() {
// 组件卸载
if (this.instance && this.context) {
this.context.nativeInstance!.removeOverlay(this.instance);
}
}
// ...
// 其他通用方法
private forceReloadIfNeed(props: P, prevProps: P) {
...
}
}
子类的工作就变得简单很多, 声明自己的属性/事件和实例化具体类:
export default class Label extends Overlay<LabelProps> {
public static defaultProps = {
enableMassClear: true,
};
public constructor(props: LabelProps) {
super(props);
const { position, content } = this.props;
// 声明支持的属性和回调
this.extendedProperties = PROPERTIES;
this.extendedEnableableProperties = ENABLEABLE_PROPERTIES;
this.extendedEvents = EVENTS;
// 实例化具体类
this.instance = new BMap.Label(content, {
position,
});
}
}
代码来源于 react-bdmap
当然这个不是唯一的解决方法, 使用高阶组件和 hooks 同样能够实现. 只不过对于原本就采用面向对象范式组织的库, 使用继承方式会更加好理解
模态框是应用开发中使用频率非常高组件,尤其在中后台管理系统中. 但是在 React 中用着并不是特别爽, 典型的代码如下:
const Demo: FC<{}> = props => {
// ...
const [visible, setVisible] = useState(false);
const [editing, setEditing] = useState();
const handleCancel = () => {
setVisible(false);
};
const prepareEdit = async (item: Item) => {
// 加载详情
const detail = await loadingDeatil(item.id);
setEditing(detail);
setVisible(true);
};
const handleOk = async () => {
try {
const values = await form.validate();
// 保存
await save(editing.id, values);
// 隐藏
setVisible(false);
} catch {}
};
return;
<>
<Table
dataSource={list}
columns={[
{
text: '操作',
render: item => {
return <a onClick={() => prepareEdit(item)}>编辑</a>;
},
},
]}
/>
<Modal visible={visible} onOk={handleOk} onCancel={handleHide}>
{/* 表单渲染 */}
</Modal>
</>;
};
上面的代码太丑了, 不相关逻辑堆积在一个组件下 ,不符合单一职责. 所以我们要将模态框相关代码抽取出去, 放到 EditModal 中:
const EditModal: FC<{ id?: string; visible: boolean; onCancel: () => void; onOk: () => void }> = props => {
// ...
const { visible, id, onHide, onOk } = props;
const detail = usePromise(async (id: string) => {
return loadDetail(id);
});
useEffect(() => {
if (id != null) {
detail.call(id);
}
}, [id]);
const handleOk = () => {
try {
const values = await form.validate();
// 保存
await save(editing.id, values);
onOk();
} catch {}
};
return (
<Modal visible={visible} onOk={onOk} onCancel={onCancel}>
{detail.value &&
{
/* 表单渲染 */
}}
</Modal>
);
};
/**
* 使用
*/
const Demo: FC<{}> = props => {
// ...
const [visible, setVisible] = useState(false);
const [editing, setEditing] = useState<string | undefined>(undefined);
const handleHide = () => {
setVisible(false);
};
const prepareEdit = async (item: Item) => {
setEditing(item.id);
setVisible(true);
};
return;
<>
<Table
dataSource={list}
columns={[
{
text: '操作',
render: item => {
return <a onClick={() => prepareEdit(item)}>编辑</a>;
},
},
]}
/>
<EditModal id={editing} visible={visible} onOk={handleHide} onCancel={handleHide}>
{' '}
</EditModal>
</>;
};
现在编辑相关的逻辑抽取到了 EditModal 上,但是 Demo 组件还要维护模态框的打开状态和一些数据状态。一个复杂的页面可能会有很多模态框,这样的代码会变得越来越恶心, 各种 xxxVisible 状态满天飞. 从实际开发角度上将,模态框控制的最简单的方式应该是这样的:
const handleEdit = item => {
EditModal.show({
// ? 通过函数调用的方式出发弹窗. 这符合对模态框的习惯用法, 不关心模态框的可见状态. 例如window.confirm, wx.showModal().
id: item.id, // ? 传递数据给模态框
onOk: saved => {
// ? 事件回调
refreshList(saved);
},
onCancel: async () => {
return confirm('确认取消'); // 控制模态框是否隐藏
},
});
};
这种方式在社区上也是有争议的,有些人认为这是 React 的反模式,@欲三更在Modal.confirm 违反了 React 的模式吗?就探讨了这个问题。 以图为例:
红线表示时间驱动(或者说时机驱动), 蓝线表示数据驱动。欲三更认为“哪怕一个带有明显数据驱动特色的 React 项目,也存在很多部分不是数据驱动而是事件驱动的. 数据只能驱动出状态,只有时机才能驱动出行为, 对于一个时机驱动的行为,你非得把它硬坳成一个数据驱动的状态,你不觉得很奇怪吗?”. 他的观点正不正确笔者不做评判, 但是某些场景严格要求‘数据驱动’,可能会有很多模板代码,写着会很难受.
So 怎么实现?
可以参考 antd Modal.confirm的实现, 它使用ReactDOM.render
来进行外挂渲染,也有人使用Context API来实现的. 笔者认为比较接近理想的(至少 API 上看)是react-comfirm这样的:
/**
* EditModal.tsx
*/
import { confirmable } from 'react-confirm';
const EditModal = props => {
/*...*/
};
export default confirmable(EditModal);
/**
* Demo.tsx
*/
import EditModal from './EditModal';
const showEditModal = createConfirmation(EditModal);
const Demo: FC<{}> = props => {
const prepareEdit = async (item: Item) => {
showEditModal({
id: item.id, // ? 传递数据给模态框
onOk: saved => {
// ? 事件回调
refreshList(saved);
},
onCancel: async someValues => {
return confirm('确认取消'); // 控制模态框是否隐藏
},
});
};
// ...
};
使用ReactDOM.render
外挂渲染形式的缺点就是无法访问 Context,所以还是要妥协一下,结合 Context API 来实现示例:
扩展
Context 为组件树提供了一个传递数据的方法,从而避免了在每一个层级手动的传递 props 属性.
Context 在 React 应用中使用非常频繁, 新的Context API也非常易用. Context 常用于以下场景:
Context 的作用域是子树, 也就是说一个 Context Provider 可以应用于多个子树, 子树的 Provider 也可以覆盖父级的 Provider 的 value. 基本结构:
import React, {useState, useContext} from 'react'
export inteface MyContextValue {
state: number
setState: (state: number) => void
}
const MyContext = React.createContext<MyContextValue>(
{
state: 1,
// 设置默认值, 抛出错误, 必须配合Provider使用
setState: () => throw new Error('请求MyContextProvider组件下级调用')
}
)
export const MyContextProvider: FC<{}> = props => {
const [state, setState] = useState(1)
return <MyContext.Provider value={{state, setState}}>{props.children}</MyContext.Provider>
}
export function useMyContext() {
return useContext(MyContext)
}
export default MyContextProvider
Context 默认值中的方法应该抛出错误, 警告不规范的使用
扩展:
对于函数式编程范式的 React 来说,不可变状态有重要的意义.
实现不可变数据的流行方法:
笔者比较喜欢 immer,没有什么心智负担, 按照 JS 习惯的对象操作方式就可以实现不可变数据。
传统的路由主要用于区分页面, 所以一开始前端路由设计也像后端路由(也称为静态路由)一样, 使用对象配置方式, 给不同的 url 分配不同的页面组件, 当应用启动时, 在路由配置表中查找匹配 URL 的组件并渲染出来.
React-Router v4 算是一个真正意义上符合组件化思维的路由库, React-Router 官方称之为‘动态路由’, 官方的解释是”指的是在应用程序渲染时发生的路由,而不是在运行应用程序之外的配置或约定中发生的路由”, 具体说, <Route/>
变成了一个普通 React 组件, 它在渲染时判断是否匹配 URL, 如果匹配就渲染指定的组件, 不匹配就返回 null.
这时候 URL 意义已经不一样了, URL 不再是简单的页面标志, 而是应用的状态; 应用构成也不再局限于扁平页面, 而是多个可以响应 URL 状态的区域(可嵌套). 因为思维转变很大, 所以它刚出来时并不受青睐. 这种方式更加灵活, 所以选择 v4 不代表放弃旧的路由方式, 你完全可以按照旧的方式来实现页面路由.
举个应用实例: 一个应用由三个区域组成: 侧边栏放置多个入口, 点击这些入口会加载对应类型的列表, 点击列表项需要加载详情. 三个区域存在级联关系
首先设计能够表达这种级联关系的 URL, 比如/{group}/{id}
, URL 设计一般遵循REST 风格, 那么应用的大概结构是这样子:
// App
const App = () => {
<div className="app">
<SideBar />
<Route path="/:group" component={ListPage} />
<Route path="/:group/:id" component={Detail} />
</div>;
};
// SideBar
const Sidebar = () => {
return (
<div className="sidebar">
{/* 使用NavLink 在匹配时显示激活状态 */}
<NavLink to="/message">消息</NavLink>
<NavLink to="/task">任务</NavLink>
<NavLink to="/location">定位</NavLink>
</div>
);
};
// ListPage
const ListPage = props => {
const { group } = props.match.params;
// ...
// 响应group变化, 并加载指定类型列表
useEffect(() => {
load(group);
}, [group]);
// 列表项也会使用NavLink, 用于匹配当前展示的详情, 激活显示
return <div className="list">{renderList()}</div>;
};
// DetailPage
const DetailPage = props => {
const { group, id } = props.match.params;
// ...
// 响应group和id, 并加载详情
useEffect(() => {
loadDetail(group, id);
}, [group, id]);
return <div className="detail">{renderDetail()}</div>;
};
扩展
Please enable JavaScript to view the comments powered by Disqus.