在ReactNative中使⽤Hooks
React官⽅在 2018 ReactConf ⼤会上宣布 React v16.7.0-alpha(内测) 将引⼊ Hooks。什么是Hooks,我们来了解⼀下。
什么是Hooks?
在平时开发过程中,我们⼀般都会遇到如下问题:
1. 难以重⽤和共享组件中的与状态相关的逻辑
2. 逻辑复杂的组件难以开发与维护,当我们的组件需要处理多个互不相关的 state 时,每个⽣命周期函数中可能会包含着各种互不相
关的逻辑在⾥⾯。
3. 由于业务变动,函数组件不得不改为类组件等等。
上⾯说起来⽐较抽象,接下来我们以 键盘Api Keyboard 为例说明问题。
1.
export
default
class App extends Component {
2.
3.
constructor(props) {
constructor(props) { 4.
super(props);
5.
this.state = {
6.
isShowKeyboard:
false
7.
}
8.
}
9.
reactnative原生列表
10.
static getDerivedStateFromProps() {
11.
this.keyboardDidShowListener = Keyboard.addListener( 12.
"keyboardDidShow",
13.
this.keyboardDidShowHandler 14.
);
15.
}
16.
17.
keyboardDidShowHandler () { 18.
this.setState({
19.
isShowKeyboard:
true
20.

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。