Reactv16.7.0-alpha.2 Hooks學習

superPershing 發(fā)布于2019-08-23 14:40 / 2004人閱讀

摘要：的來源鉤子，顧名思義，為了解決在函數(shù)組件中使用和生命周期，同時提高業(yè)務邏輯復用。函數(shù)組件等同于一個純的專門用作渲染的函數(shù)，我們知道，在函數(shù)組件中，我們無法使用和生命周期，這也是為了解決的問題。

Hooks的來源

Hooks => 鉤子，顧名思義，為了解決在函數(shù)組件（Function Component）中使用state和生命周期，同時提高業(yè)務邏輯復用。      Function Component == Puer Render Function 函數(shù)組件等同于一個純的專門用作渲染的函數(shù)，我們知道，在函數(shù)組件中，我們無法使用state和生命周期，這也是Hooks為了解決的問題。

第一個API: useState

import { useState } from react // 引入
const [count, setCount] = useState(0)    
相當于
this.state ={ count = 0} 所以 useState(arg)放數(shù)組 字符串 對象都可以，就是起到一個初始化state的作用
setCount 相當于 this.setState({count: count})
count = count + 1 這樣的寫法是錯的，不能直接修改state的值，需要使用setCount(value)
我們可以聲明多個狀態(tài)

第二個API: useEffect

這個函數(shù)是為了解決當狀態(tài)或者傳入的props發(fā)生變化后，需要做出的邏輯處理

比如： count + 1 后，就會觸發(fā)

useEffect( () => {
// 邏輯處理在這里
}, [count])  //第二個參數(shù)是綁定需要監(jiān)聽變化的參數(shù)

下面是一個完整的例子

父組件中傳入的props value 每秒 + 1 父組件就不貼代碼了，文末有完整代碼地址
這個項目里包含自定義Hook 以及useEffect的觸生命周期，包含自身state以及父組件傳入prop改變后，useEffect的用法

import React from "react";
import { useState, useEffect } from "react";

// 自定義hooks
function diyHooks (value) {

  const [flag, setFlag] = useState(false);

  useEffect(() => {
    if(value % 2 === 0) {
      setFlag(true)
    } else {
      setFlag(false)
    }
    console.log(flag)
  }, [value])

  return flag;

}


function Try (props) {

  const [count, setCount] = useState(0)
  const [number, setNumber] = useState(0)
  const value = props.value
  const flag = diyHooks(props.value)

  useEffect(() => {
    console.log("count", count);
  }, [count])

  useEffect(() => {
    console.log("number", number);
  }, [number])


  useEffect(() => {
    console.log("props", value)
  }, [value])

  return (
    
      {flag === true ? "true" : "false"}
      {value}
      
    
  )
}

export default Try;

關于自定義hooks，我寫了一個react-hooks  介紹了React Hooks的簡單用法

GPU云服務器云服務器 hooks React hooks react-hooks React Hooks 文檔重大更新！

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/100961.html

react hooks初體驗

摘要：此優(yōu)化有助于避免在每個渲染上進行昂貴的計算。同樣也是一個函數(shù)，接受兩個參數(shù)，第一個參數(shù)為函數(shù)，第二個參數(shù)為要比對的值，返回一個值。同理，第二個參數(shù)傳入的值沒有更新時，不會執(zhí)行。以上代碼的地址為初體驗什么是Hooks？Hooks是react即將推出的功能，它允許您在不編寫類的情況下使用狀態(tài)和其他React功能。我的理解就是可以用寫無狀態(tài)組件的方式去編寫擁有狀態(tài)的組件。遺憾的是，正式版1...

anyway 2019-08-23 14:14 評論0 收藏0
React Hooks實現(xiàn)異步請求實例—useReducer、useContext和useEffec

摘要：本文是學習了年新鮮出爐的提案之后，針對異步請求數(shù)據(jù)寫的一個案例。注意，本文假設了你已經(jīng)初步了解的含義了，如果不了解還請移步官方文檔。但不要忘記和上下文對象可以看做是寫法的以及三個鉤子函數(shù)的組合。本文是學習了2018年新鮮出爐的React Hooks提案之后，針對異步請求數(shù)據(jù)寫的一個案例。注意，本文假設了：1.你已經(jīng)初步了解hooks的含義了，如果不了解還請移步官方文檔。（其實有過翻譯...

Code4App 2019-08-23 13:49 評論0 收藏0
ReactV16.3，即將更改的生命周期

摘要：我們目前的計劃是為不安全生命周期引入別名，和。從現(xiàn)在開始，只有新的生命周期名稱將起作用。從版本開始，更新以響應更改的推薦方法是使用新的靜態(tài)生命周期。注釋：本文是根據(jù)React的官方博客翻譯而成（文章地址：https://reactjs.org/blog/2018...）。主要講述了React之后的更新方向，以及對之前生命周期所出現(xiàn)的問題的總結，之后的React將逐步棄用一些生命周期和...

wendux 2019-08-22 16:28 評論0 收藏0