React hooks最激动人心的部分无疑是自定义hook,充满了无限的可能和可复用性,同时让代码前所未有得清晰。
- 如何现在就使用hooks?
# 创建项目
create-react-app myApp
# 进入项目目录
cd myApp
# 升级 react 和 react-dom
yarn add react@next react-dom@next
复制代码
即可。
今天写了一个奇异的custom hooks,奇异之处在于返回了组件。
一个普通的 antd
的 Modal
用例如下:
官网链接
import { Modal, Button } from 'antd';
class App extends React.Component {
state = { visible: false }
showModal = () => {
this.setState({
visible: true,
});
}
handleOk = (e) => {
console.log(e);
this.setState({
visible: false,
});
}
handleCancel = (e) => {
console.log(e);
this.setState({
visible: false,
});
}
render() {
return (
<div>
<Button type="primary" onClick={this.showModal}>
Open Modal
</Button>
<Modal
title="Basic Modal"
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Modal>
</div>
);
}
}
ReactDOM.render(<App />, mountNode);
复制代码
会不会觉得好烦? 我就想用一下弹层,怎么又要定义 visible 的 state,又要写 showModal 方法。
<Button type="primary" onClick={this.showModal}>
Open Modal
</Button>
<Modal
title="Basic Modal"
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Modal>
复制代码
能否简化成
<Button type="primary">
Open Modal
</Button>
<Modal
title="Basic Modal"
onOk={this.handleOk}
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Modal>
复制代码
呢?可以。
于是我写了这个demo:Code Demo
const App = () => {
const {MyBtn, MyModal} = useModal()
return (
<div>
<MyBtn type="primary">Click me!</MyBtn>
<MyModal title="Basic Modal" onOK={() => alert('everything is OK')}>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</MyModal>
</div>
)
}
复制代码
这里的 useModal
是一个 custom hooks。实现代码是
import React, {useState} from 'react'
import 'antd/dist/antd.css'
import {Button, Modal} from 'antd'
const useModal = () => {
const [on, setOn] = useState(false)
const toggle = () => setOn(!on)
const MyBtn = props => <Button {...props} onClick={toggle} />
const MyModal = ({onOK, ...rest}) => (
<Modal
{...rest}
visible={on}
onOk={() => {
onOK && onOK()
toggle()
}}
onCancel={toggle}
/>
)
return {
on,
toggle,
MyBtn,
MyModal,
}
}
复制代码
对于使用者甚至不用关心具体实现,直接把 Button 和 Modal 拿来用就好,点击 Button 就会弹 Modal,什么 visible,toggle,onClick 等只和 Modal 内部实现相关的逻辑全全隐藏了。
大家怎么看?
补充:一直觉得这么写有点性能问题,在reddit上问了下,Dan 给出的回复如下:
The problem with this code is that it returns a new component type on every render. This means that the >state of all components below Modal will be reset because
OldModal !== NewModal
on every next render. >You can learn more about it here: reactjs.org/docs/reconc…Instead, you can return elements directly. But don't return components.
简单的说,返回 Modal 组件,由于React内部diff的判定方式,会认为任何两次渲染中 type 都不同,所以会使得 Modal 的所有子树每次都丢弃并重新渲染。这不得不说是一个性能问题。所以暂时不推荐用此 hook。