搭建react环境，先安装creat-react-app脚手架。使用npmruneject命令显示webpack配置文件。使用creat-react-app项目名称。创建一个反应项目。npmi初始化项目npmstart启动项目gitdemohttps://github.com/imlimiao/react-Hooks-study2。搞清楚react的状态管理stateReact是一个状态机，体现在哪里，就体现在状态上，通过与用户的交互，实现不同的状态，然后渲染UI，让用户的数据并且界面一致。状态是组件的私有属性。state只能在本组件内初始化，state只能在本组件内修改和复制，不能被外部复制和修改，所以也可以说state是组件的私有状态初始化.在构造函数中初始化。构造函数（道具）{超级（道具）；this.state={key:value,...}}2.更新状态注意：setState()是异步的，即你调用setState()后，React开始准备更新，可能会有一定的延迟中间计算this.setState({key:value});3、调用diff算法setState()会触发diff算法最终判断是否更新。每次更新新状态的数据，都会重新执行render。~~~~可以让setState()接受一个函数而不是一个对象。该函数将之前的状态作为第一个参数，应用本次更新时的道具作为第二个参数：~~~~//Correctthis.setState((state,props)=>({counter:state.counter+props.increment}));react主要是单数据流进行页面渲染。数据渲染中经常会遇到数据更新。React中没有类似Vue的监控（watch、compute）。在做这类数据的时候，需要在钩子函数中使用[props]数组，类似于使用componentDidUpdate。当然类似watch-props的包还有很多。建议不要这样写。这将业务逻辑绑定到React生命周期。不易管理。Hooks的推出解决了这个问题。5.React-HooksReactHooks制定规则为保证Hooks在使用时出现可预见的问题，官方制定了两条规则（建议）需要遵循，并提前声明。只在函数组件内部调用最顶层的Hook，在循环、条件判断、嵌套函数中调用；Hooks只能在函数组件中调用（Hooks可以在Hooks的定义中调用），需要在其他JavaScript函数中调用。**BasicHooksAPIuseState(state状态管理，更容易理解)useEffect(sideeffectfunction,hookfunction,componentWillUpdate,componentDidUpdate.)React在渲染组件时，会保存使用过的效果，更新DOM后执行。这个过程发生在每个渲染器上，包括第一个渲染器。有些副作用可能需要清除，所以需要返回一个函数（比如componentWillUnmount）useEffect(()=>{document.title=`Youclicked${count}times`;},[count]);//仅当计数发生变化时更新javascript-如何使用ReactuseEffect在初始化时仅调用一次加载函数。componentDidMount(){loadDataOnlyOnce();如果你只想在初始渲染后运行给useEffect的函数，你可以给它一个空数组作为第二个参数。useEffect(()=>{loadDataOnlyOnce();},[]);useContext详细demo请参考(components-hooks-context)考虑这样一个场景，如果组件树结构如下，现在想从根节点向叶子节点ADF传递一个userName属性，通过props，将不可避免地通过BCE传递，即使这些组件不使用此userName属性。从'react'导入React，{useState，useContext}；从'react-dom'导入ReactDOM；constmyContext=React.createContext();//子组件函数Com(){const{count,setCount}=useContext(myContext);return(
