Simple implementation of useState hook React

　　Some time useless React, re-study again the official website of the new features hooks content, simply write their own simple, easy to remember some of the precautions listed in the official website.

const makeUseState = () => {

newOne = stateAmount = const> ({

index: 0,

whole: stateAmount,

data: [],

getData(initData) {

let i = this.index;

this.index = (i + 1) % this.whole;

return [this.data[i] ? this.data[i] : (this.data[i] = initData), this.setData(i)];

setData(index) {

return (newData, rerender) => {

this.data[index] = newData;

rerender ();

};

}

});

const rootState = {};

return (data, CpName, seq, stateAmount) => {

if (rootState[CpName] === undefined) {

rootState[CpName] = [];

}

let store = rootState[CpName];

if (!store[seq]) {

Store [seq] = newOne (stateAmount);

}

return store[seq].getData(data);

};

const myUseState = makeUseState();

const N = props => {

const { seq, testDiff, update } = props;

// add template string parsing the next three parameters

const [A, setA] = myUseState('123', 'N', seq, 2);

const [B, setB] = myUseState('123', 'N', seq, 2);

const tmout = testDiff === 'a' 2000: 4000;?

return (

<div>

{TestDiff} functions of components:

<br />

<button onClick={() => setA('123A', update)}>更新</button>

<br />

A= {A}

<br />

<button onClick={() => setB('123B', update)}>更新</button>

<br />B = {B}

</div>

);

};

class M extends Component {

render() {

return (

<div>

{/ * Seq, update the string is parsed template add * /}

<N seq={0} update={() => this.setState({})} testDiff="一" />

<N seq={1} update={() => this.setState({})} testDiff="二" />

</div>

);

}

ReactDOM.render(<M />, app);

　　I remember just started React when projects are a function component, do not stop, simple and clean, plug and play, simply lazy gospel of cancer patients, and then slowly to reach the state needs to instantiate the scene.

　　At that time, scenario is that the same page without the two functions the same components, so lazy continued, the reset state of the component functions in unloading the hook assembly in the parent class, so that even if the page is switched, can not see the flaws , at first glance, seems to have realized the function of the state assembly, and later they used too feel awkward, jargon, is elegant enough (I talk to you about the progress of elegance with me?!). Quguan deliberately looked under the net, called a kind of mixin (not sass of @mixin) and the way I realized a bit like, in essence, as if out of a suspect can not copy and paste or what? ! You afraid of being deeply despised OOP programmers? Naturally, they are walking dead for many years, must rely on two nirvana, a ctrl + c, a ctrl + V? Congratulations, you won the dignity and fullness of hair volume single Wang, but as the saying goes, no think, no gain, understanding is often the most efficient way of memory.

　　In fact, I just started using useState is rejected, and my heart kind of anxiety, like broken windows into the building interior demolition throwing stones, throwing the moment when the hear the sound, followed by heart will be scared, the next knock code when hands are shaking, why useState according to the order index? Why can not nest if the middle judge?

　　Function component is certainly not with class components ratio, dapper but can not breed indeed be a pity, and consequently have personally stood on data accidentally bunch weight, then, of course, you can not fuss with similar Vux, Redux as specifically built data centers, in short, simple words, and it seems to be able to get with the closure, the closure is not designed to manufacture portable data warehouse it?

　　First, that some personal understanding, like babel these will js, jsx, es gave AST turn into grammar, not that it is essentially a template string parsing? Since there is no state function components, can function to remember the number of each component by template string, so that regardless of what a similar function component update, can correspond to their own state. In my opinion, with the function components useState will view layer and data layer separation was more evident, clear, easy to read, the one state instantiation process hide behind the scenes, this would no doubt greatly improving developer efficiency (less knock Code! == improve efficiency).

　　Said so much nonsense, to say the reason can not be divided under useState with determination condition, after all, this is the official website specially emphasized the need to pay attention to:

　　From the implementation of the above demo can basically reflect my point of view, to react specifically how to achieve useState principle I do not know, but according to the demand to achieve a similar effect. According to my implementation, the code at compilation stage (stage escape) , to sort of function number of different components and the number of calls, useState even written in the judging criteria will be placed in an array, in fact, the code runs stage , there is also no way to judge whether this useState to finish the round cycle, which may also be the official website stressed that the reason useState judge can not put conditions on the other hand, also because of the use of an array of ways to store data once decided not to press the repeat mark through the array, it may be wrong.

　　Anyway, not that the nature of the framework of use of each into a template string syntax to create a convenient way of writing code for it? Hope in the future, these plants overseas foreign developers can bring more my kind of lazy gospel of cancer patients!

Simple implementation of useState hook React

Guess you like