React Hooks新特性學習隨筆

2022-11-24 23:17:15 字數 2152 閱讀 5485

react hooks 是 react 16.8 的新增特性。它可以讓你在不編寫 class 的情況下使用 state 以及其他的 react 特性。

本篇主要以講幾個常用的api為主。

這個例子用來顯示一個計數器。當你點選按鈕,計數器的值就會增加,現在我們的寫法如下,

class example extends react.component ;

} render() times

this.setstate()}>

click me

);}}

這是我們所熟悉的寫法,替換成usestate後

import react,  from 'react';

function example() times

setcount(count + 1)}>

click me

);}

function examplewithmanystates() ]);

// ...

}

useeffect 就是一個 effect hook,給函式元件增加了操作***的能力。它跟 class 元件中的 componentdidmount、componentdidupdate 和 componentwillunmount 具有相同的用途,只不過被合併成了一個 api。

依然是先上例子

class example extends react.component ;

} componentdidmount() times`;

} componentdidupdate() times`;

} render() times

this.setstate()}>

click me

);}}

import react,  from 'react';

function example() times`;

});return (

you clicked times

setcount(count + 1)}>

click me

);}

import react,  from 'react';

function example() times`);

return () =>

});return (

you clicked times

setcount(count + 1)}>

click me

);}

useeffect(() =>  times`;

}, [count]); // 僅在 count 更改時更新

usestate 的替代方案。它接收一個形如 (state, action) => newstate 的 reducer,並返回當前的 state 以及與其配套的 dispatch 方法。(如果你熟悉 redux 的話,就已經知道它如何工作了。)

// reducer.js

export const initialstate = ;

export default (state, action) => ;

case 'decrement':

return ;

default:

throw new error();

}}// counter.js

import react, from 'react';

import reducer, from './reducer.js';

function counter() )}>+

dispatch()}>-

);}

接收一個 context 物件(react.createcontext 的返回值)並返回該 context 的當前值。當前的 context 值由上層元件中距離當前元件最近的 的 value prop 決定。

具體使用檢視這篇文章。

譯文 React v16(新特性)

我們很高興的宣佈react v16.0釋出了 這個版本有很多長期被使用者期待的功能,包括 下面逐一說明 render函式可返回新的型別 陣列和字串 新的版本支援元件的render方法返回包含元素的陣列型別,如下 1 render 新的版本也支援render方法返回的型別為strings。關於rend...