Added The "Functional Way" (#21397)

Fast and short description of the functional way. Linked to a great article under More Information that goes in more detail about it.
This commit is contained in:
odm275
2018-11-14 06:54:34 -06:00
committed by Tom
parent c3d2903d78
commit 59b55f7082

View File

@ -94,9 +94,26 @@ When only a limited number of properties in the state object are required, objec
this.setState(({ value }) => ({ value: value + 1 }));
```
When only a limited number of fields in the state object are required, object destructing can be used for cleaner code.
#### The "Functional Way"
The functional way declares state changes separately from the component classes. Hence,
```javascript
// outside your component class
function increment(state,props){
return { score: state.value +1 }
}
...
// inside your component class
this.setState(increment)
```
Importing state via changes via functions helps keep each module as short as possible and can be used for cleaner code.
#### More Information
- [React - State and Lifecycle](https://reactjs.org/docs/state-and-lifecycle.html)
- [React - Lifting State Up](https://reactjs.org/docs/lifting-state-up.html)
- [React Native - State Up](https://facebook.github.io/react-native/docs/state.html)
- [Functional setState is the future of React](https://medium.freecodecamp.org/functional-setstate-is-the-future-of-react-374f30401b6b)