React Tutorial - 25.useState
1.why we need react hooks
a.hooks give state to functional components
b.hooks give life cycle function to function components
c.class components have difficult "this " pointer
d.sometimes class components put too much logics into one function(componentDidMount -- subscribe,http request,initalize some states)
e.class components' state is hard to resue(we could only reuse state by higher order components or render props)
2.react hooks use cases
a.hooks can replace class components under most of scenarios
b.hooks can be embeded into old projects which was written by class components.
c.hooks can only write in the functional compnents,
3.counter app comparison
a.class componets style
b.functional components(react hooks)
4.useState
a.parameter is the initial value of the state, return undefined if null
b.return an array contains two elemets
aa.first element is the value of this state
bb.second element is the method to modify this state
c.useState can only be used in the most outer layer of the functional component, you can not useState in the statements below
aa.if else condition statement
bb.loop statement
cc.function statement
5.multiple states
a.click the button
d.setState change the value
c. setState needs a new object to replace existing state, or the page will not be re-rendered
6.complex states