在 React Native 中使用 Hooks

React官方在 2018 ReactConf 大会上宣布 React v16.7.0-alpha(内测) 将引入 Hooks。什么是Hooks,我们来了解一下。

什么是Hooks?

在平时开发过程中,我们一般都会遇到如下问题:

1. 难以重用和共享组件中的与状态相关的逻辑
2. 逻辑复杂的组件难以开发与维护,当我们的组件需要处理多个互不相关的 state 时,每个生命周期函数中可能会包含着各种互不相关的逻辑在里面。
3. 由于业务变动,函数组件不得不改为类组件等等。

上面说起来比较抽象,接下来我们以 键盘Api Keyboard 为例说明问题。

export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      isShowKeyboard: false
    }
  }

  static getDerivedStateFromProps() {
    this.keyboardDidShowListener = Keyboard.addListener(
      "keyboardDidShow",
      this.keyboardDidShowHandler
    );
  }

  keyboardDidShowHandler () {
    this.setState({
      isShowKeyboard: true
    });
  }

  componentWillUnmount() {
    this.keyboardDidShowListener.remove();
  }

  render() {
    return (
    
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 程序猿惹谁了 设计师:白松林 返回首页
实付 19.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值