React手稿之State Hooks of Hooks

DC_er 发布于2019-08-23 13:53 / 331人阅读

摘要：官方也陈述，接下来的的工作会投入到中。从目前官方的文档可以看出，从以下四个方面来提高的编码。生命周期自定义方法的主要用途是替代之前版本的组件。说明到目前为止，在已发布的版本中有该功能，想体验该功能，必须安装。

React Hooks

React在16.7.0-alpha.0版本中提到了Hooks的概念，目前还是Proposal阶段。

官方也陈述，接下来的90%的工作会投入到React Hooks中。

从目前官方的文档可以看出，Hooks从以下四个方面来提高React的编码。

state

生命周期

content

自定义方法

Hooks的主要用途是替代之前版本的 class 组件。

说明：

到目前为止，React在已发布的release版本中有该功能，想体验该功能，必须安装16.7.0-alpha.0。

npm i react@16.7.0-alpha.0 react-dom@16.7.0-alpha.0

//或者

yarn add react@16.7.0-alpha.0 react-dom@16.7.0-alpha.0

State Hooks

首先看一个React既有的版本基于 class 的组件.

import React from "react";

class Counter extends React.Component {
  constructor(props) {
    super(props);

    this.state = { count: 0 };
  }

  render() {
    const { count } = this.state;
    return (
       
        You clicked {count} times
        
      
    );
  }

}

接下来我们看看用Hooks是如何实现的：

import React, { useState } from "react";

export default () => {

  const [count, setCount] = useState(0);

  return (
    
      You clicked { count } times
      
    
  );
};

从代码结构上，减少了编码量。由原来的 class 组件变成 function 组件了。

不同的地方：

新加入了 useState 方法

通过 useState 钩子解构出了 state 与 setState 方法。

state 的默认值，直接通过 useState 传入

更新 state 不再使用 setState 方法。

如果有多个 state 怎么定义呢？

const [count, setCount] = useState(0);
const [name, setName] = useState(null);

在线示例
推荐阅读《React 手稿》

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99725.html

快速了解 React Hooks 原理

摘要：使用该对象，可以跟踪属于组件的各种元数据位。调用你的组件这意味着它知道存储的元数据对象。下一次渲染会发生什么需要重新渲染组件由于之前已经看过这个组件，它已经有了元数据关联。为了保证的可读性，本文采用意译而非直译。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！我们大部分 React 类组件可以保存状态，而函数组件不能？并且类组件具有生命周期，而函数组件却不能...

Hydrogen 2019-08-26 14:04 评论0 收藏0
React Hooks 之 useFetch

摘要：而每次捕获出的错误可能需要打印出来以检测。同时有些同学不习惯使用来捕获错误，这就可能造成不可预计的问题。是否立即请求并接受初始化返回值业务我们并不希望初始化的是否立即发送请求。前言自 React Hooks 16.8.0 后带来了 React hooks 这一特性。这一特性在没有破坏性的更新下为我们带来了更加舒爽的开发方式。过去我们常常因providers，consumers，高阶组件，...

Ryan_Li 2019-05-22 17:07 评论0 收藏0
浅谈React Hooks

摘要：另外也不利于组件的，及。所以在使用时，尽量将相关联的，会共同变化的值放入一个。有同学可能会想，每次后都会执行，这样会不会对性能造成影响。另外必须以开头来命名，这样工具才能正确检测其是否符合规范。由于工作的原因我已经很长时间没接触过React了。前段时间圈子里都在讨论React Hooks，出于好奇也学习了一番，特此整理以加深理解。缘由在web应用无所不能的9012年，组成应用的C...

yearsj 2019-08-23 15:33 评论0 收藏0
(译)React hooks：它不是一种魔法，只是一个数组——使用图表揭秘提案规则

摘要：它并不是实际在内部的工作方式，而且它只是一个提案，在未来都会有可能发生变化。这意味着，数据的存储是独立于组件之外的。因此，有一个诀窍就是你需要思考作为一组需要一个匹配一致的指针去管理的数组染陌译。原文地址：https://medium.com/@ryardley/... 译文：染陌（Github）译文地址：https://github.com/answershuto/Blog 转...

fjcgreat 2019-08-23 13:41 评论0 收藏0
10分钟了解 react 引入的 Hooks

摘要：最近官方在大会上宣布内测将引入。所以我们有必要了解，以及由此引发的疑问。在进一步了解之前，我们需要先快速的了解一些基本的的用法。如何解决状态有关的逻辑的重用和共享问题。 showImg(https://segmentfault.com/img/remote/1460000016886798?w=1500&h=750); 大家好，我是谷阿莫，今天要将的是一个...，哈哈哈，看到这个题我就...

Lucky_Boy 2019-08-23 12:40 评论0 收藏0