炫意html5
最早CSS3和HTML5移动技术网站之一

手写reacthooks的useState

前言

关于react hooks的useState,在写hooks的时候经常用到,我在之前也有文章写过reactHooks中useState的使用小结
关于useState这个hooks,我们如何手写实现呢?

useState使用小结

1、接收任意类型的入参数,可以是数组、对象、函数等。

2、可以被多次调用,每调用一次都可以解构出不同的状态变量。

3、setState 也可以传入回调函数。改回调函数会被自动传入当前对应的状态变量。

4、被结构出来的状态变量和更改状态变量的方法是1对1绑定的。

5、调用setState后,要重新render函数组件

使用useState的案例

import React, { useState } from "react";
export default function App() {
// 声明一个新的叫做 “count” 的 state 变量
const [count, setCount] = useState([0]);
const [name, setName] = useState("炫H5");
const [炫H5, setHaorooms] = useState(() => "欢迎炫H5");
return (
<div>
<p>
You clicked {count}
{count[0]} times
</p>
<p>Call me {name}</p>
<p>{name} is 炫H5 blog ?</p>
<p>{炫H5} is good blog ?</p>
<button
onClick={() => {
setCount([count[0] + 1]);
setName("炫H5博客");
setHaorooms((preRooms) => `欢迎${preRooms}`);
}}
>
点击
</button>
</div>
);
}

手写react hooks的useState

import ReactDOM from "react-dom";
let state = [];
let setters = [];
let stateIndex = 0;
const getStateByFn = (v, params) => {
if (typeof v === "function") {
const _newState = v(params);
if (!_newState) throw "You must be return state";
return _newState;
}
return v;
};
function createSetter(index) {
return function (newState) {
state[index] = getStateByFn(newState, state[index]);
render();
};
}
function useState(initialState) {
state[stateIndex] = state[stateIndex]
? getStateByFn(state[stateIndex])
: getStateByFn(initialState);
setters.push(createSetter(stateIndex));
let value = state[stateIndex];
let setter = setters[stateIndex];
stateIndex++;
return [value, setter];
}
function render() {
stateIndex = 0;
ReactDOM.render(<App />, document.getElementById("root"));
}
export default function App() {
// 声明一个新的叫做 “count” 的 state 变量
const [count, setCount] = useState([0]);
const [name, setName] = useState("炫H5");
const [炫H5, setHaorooms] = useState(() => "欢迎炫H5");
return (
<div>
<p>
You clicked {count}
{count[0]} times
</p>
<p>Call me {name}</p>
<p>{name} is 炫H5 blog ?</p>
<p>{炫H5} is good blog ?</p>
<button
onClick={() => {
setCount([count[0] + 1]);
setName("炫H5博客");
setHaorooms((preRooms) => `欢迎${preRooms}`);
}}
>
点击
</button>
</div>
);
}

上面代码直接copy出来,作为app.js 直接引入既可以测试了!

炫意HTML5 » 手写reacthooks的useState

Java基础教程Android基础教程