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