資訊專欄INFORMATION COLUMN
摘要：官方也陳述，接下來的的工作會投入到中。從目前官方的文檔可以看出，從以下四個方面來提高的編碼。生命周期自定義方法的主要用途是替代之前版本的組件。說明到目前為止，在已發(fā)布的版本中有該功能，想體驗該功能，必須安裝。
React Hooks
React在16.7.0-alpha.0版本中提到了Hooks的概念，目前還是Proposal階段。
官方也陳述，接下來的90%的工作會投入到React Hooks中。
從目前官方的文檔可以看出，Hooks從以下四個方面來提高React的編碼。
state
生命周期
content
自定義方法
Hooks的主要用途是替代之前版本的 class 組件。
說明：
到目前為止，React在已發(fā)布的release版本中有該功能，想體驗該功能，必須安裝16.7.0-alpha.0。
npm i [email protected] [email protected] //或者 yarn add [email protected] [email protected]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是如何實現(xiàn)的：
import React, { useState } from "react";
export default () => {
const [count, setCount] = useState(0);
return (
You clicked { count } times
);
};
從代碼結(jié)構(gòu)上，減少了編碼量。由原來的 class 組件變成 function 組件了。
不同的地方：
新加入了 useState 方法
通過 useState 鉤子解構(gòu)出了 state 與 setState 方法。
state 的默認值，直接通過 useState 傳入
更新 state 不再使用 setState 方法。
如果有多個 state 怎么定義呢？
const [count, setCount] = useState(0); const [name, setName] = useState(null);
在線示例
推薦閱讀《React 手稿》
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/99725.html
摘要：使用該對象，可以跟蹤屬于組件的各種元數(shù)據(jù)位。調(diào)用你的組件這意味著它知道存儲的元數(shù)據(jù)對象。下一次渲染會發(fā)生什么需要重新渲染組件由于之前已經(jīng)看過這個組件，它已經(jīng)有了元數(shù)據(jù)關(guān)聯(lián)。 為了保證的可讀性，本文采用意譯而非直譯。 想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你！ 我們大部分 React 類組件可以保存狀態(tài)，而函數(shù)組件不能？ 并且類組件具有生命周期，而函數(shù)組件卻不能...
摘要：而每次捕獲出的錯誤可能需要打印出來以檢測。同時有些同學不習慣使用來捕獲錯誤，這就可能造成不可預(yù)計的問題。是否立即請求并接受初始化返回值業(yè)務(wù)我們并不希望初始化的是否立即發(fā)送請求。前言 自 React Hooks 16.8.0 后帶來了 React hooks 這一特性。這一特性在沒有破壞性的更新下為我們帶來了更加舒爽的開發(fā)方式。過去我們常常因providers，consumers，高階組件，...
摘要：另外也不利于組件的，及。所以在使用時，盡量將相關(guān)聯(lián)的，會共同變化的值放入一個。有同學可能會想，每次后都會執(zhí)行，這樣會不會對性能造成影響。另外必須以開頭來命名，這樣工具才能正確檢測其是否符合規(guī)范。 由于工作的原因我已經(jīng)很長時間沒接觸過React了。前段時間圈子里都在討論React Hooks，出于好奇也學習了一番，特此整理以加深理解。 緣由 在web應(yīng)用無所不能的9012年，組成應(yīng)用的C...
摘要：它并不是實際在內(nèi)部的工作方式，而且它只是一個提案，在未來都會有可能發(fā)生變化。這意味著，數(shù)據(jù)的存儲是獨立于組件之外的。因此，有一個訣竅就是你需要思考作為一組需要一個匹配一致的指針去管理的數(shù)組染陌譯。 原文地址：https://medium.com/@ryardley/... 譯文：染陌 （Github） 譯文地址：https://github.com/answershuto/Blog 轉(zhuǎn)...
摘要：最近官方在大會上宣布內(nèi)測將引入。所以我們有必要了解，以及由此引發(fā)的疑問。在進一步了解之前，我們需要先快速的了解一些基本的的用法。如何解決狀態(tài)有關(guān)的邏輯的重用和共享問題。 showImg(https://segmentfault.com/img/remote/1460000016886798?w=1500&h=750); 大家好，我是谷阿莫，今天要將的是一個...，哈哈哈，看到這個題我就...
閱讀 1435·2021-09-22 15:52
閱讀 1480·2019-08-30 15:44
閱讀 904·2019-08-30 14:24
閱讀 2715·2019-08-30 13:06
閱讀 2710·2019-08-26 13:45
閱讀 2795·2019-08-26 13:43
閱讀 1027·2019-08-26 12:01
閱讀 1456·2019-08-26 11:56
