一、Hooks（勾子）

1、使用hooks原因

  1、高阶组件的复用，导致代码层级的复杂
  2、生命周期复杂
  3、函数组件16.8版本前无状态，改写class组件成本高

useState(保存组件状态)

  const [state,setstate] = useState()
  state初始值 ，setstate改变后的值会覆盖掉state的值

useEffect(处理副作用)，useLayoutEffect(同步执行副作用)

 useEffect(() => {
  //effect
  return () => {
 //cleanup
};
}, [依赖的状态;空数组,表示不依赖，只会执行一次，往往用于请求数据的勾子里])

如果你明明使用了某个变量，却没有申明在依赖中，你等于向 React 撒了谎，后果就是，当依赖的变量改变时，useEffffect 也不会再次执行, eslint会报警告

Preview页面改造成函数式组件，在路径上从id=1切换到id=2也会自动重新加载，比class组件方便