Comments (1)
Hey, @zerofront, didn't pick up on this for a while. Sorry!
Too Long; Didn't Read
-
setState
is a React class component built-in feature.When you pass new state values to it, the component obeys that change and rerenders its elements accordingly. It's as simple as that.
-
trySetState
is a feature by this manager utility, built on top of that React feature.It attempts to read your props and find out whether a key of the same name exists, and if it does, only changes the state value if you don't provide a prop of the same name for it. If your prop name is
value
and your state name isvalue
, then trySetState will attempt to useprop.value
to update yourstate.value
.
The Longer Explanation
class Number extends React.Component {
state = { number: this.props.number || 0 }; // defaults to 0
trySetState = NumberAutoControlledManager.trySetState;
incrementNumber = () => {
this.setState({ // <-- Updates "number"; Doesn't care if props also has "number".
number: this.state.number + 1,
});
}
incrementNumberIfNoProp = () => {
this.trySetState({ // <-- Updates "number" state only if prop.number wasn't given.
number: this.state.number + 1
});
}
}
// The number will increment itself since AppUncontrolled didn't give a prop.
const AppUncontrolled = <div><Number /></div>;
// Starts at 0. Increments by 1 on every button click.
// The number will not increment because AppControlled gave it `123`.
const AppControlled = <div><Number number={123} /></div>;
// Starts at 123. Never increments.
The idea of this utility is to help you write components that update themselves if you provide no props for them.
Don't get me wrong: You could do the same thing without this utility, but you'll have to write the implementation details yourself... on every component that can self-update. Or you could write your own. How you do it is a matter of personal choice.
from react-auto-controlled.
Related Issues (1)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-auto-controlled.