react 知识整理

          最近把react深入的学习了一下，对react里面的一些知识有了一些自己的理解，总结一下。

           因为学习react是从react hooks开始学的，所以平时用的最多的还是函数组件，类组件也是了解了一下，类组件是通过继承React.Component进行组建的构建，虽然也提供了state状态和其他钩子函数，但是在使用的时候还是有很多不方便的地方，比如挂载和更新需要写重复的代码，很多逻辑代码不能复用，比较难理解。react hooks就比较方便了，他是直接通过函数式方法写组件，不能使用state，但是他提供了useState函数进行代替，他还封装了类似useEffect等函数，使用起来非常的方便。

           首先先说下react hooks的几个钩子函数

            1、 useState ：const [state, setState] = useState(init);在使用的时候我们可以state直接使用，setState用于更新state，init位置代表初始值，我可以放初始的数据，之后用set进行更新

             2、useEffect ：useEffect（function，[]）,接受两个参数，第一个是函数，第二个是数组，它相当于是声明周期函数，在刚开始执行的时候会执行，如果要执行依稀，就默认是一个空数组，数组里面可以放函数所依赖的变量，当变量发生变化的时候useEffect里面的函数会再次执行。

             3、 useCallback ：useCallback（function，[]）,接受的参数和effect接受的参数是一样的，会在组件第一次渲染的时候执行，之后是在以来发生变化的时候执行，但是useCallback是有返回值的，它返回的是缓存的函数

             4、useMemo ：useMemo（function，[]）,接受的参数和effect接受的参数是一样的，会在组件第一次渲染的时候执行，之后是在以来发生变化的时候执行，但是useMemo是有返回值的，它返回的是缓存的变量

             5、useRef : 用来获取某个元素的dom节点

        再来说下reducer的使用（附图如下）

        

redux的核心思想就是，视图与状态是相互对应的，而redux就是把所有的状态进行统一的保存。

下面大致讲一下redux的工作流程：

       通过上面的图可以看到用户首先是发出Action，我们通常把这个过程叫dispatch的过程，之后我们会通过store去调用reducer方法，reducer方法接受两个参数，分别是当前的state和收到的action，之后会返回新的state，我们会有一个监听函数，当我们的state一旦发生变化，store就会调用监听函数，就会立即更新我们的state，更新state之后就会更新我们的视图层，显示新的数据，这个就是数据变化过程。

下面来解释下每个工程中英文的意义：

       首先 是store，store是数据保存的地方，可以把它看成是一个容器，这个容器可以是生成的，也可以借助其他工具。state，store用于保存数据，那么当数据发成变化的时候就要对数据进行更新，之后我们可以拿到当前的最新的 state状态，从而更新数据并渲染。当state变化的时候，我们的view视图层会发生改变，但是用户不会知道我们的state变化，他们只能接触到我们的视图层，所以state变化是view的变化导致的，这时候就需要另一个对象了，Action对象就相当于view发出的通知，他会告诉state该发生变化了。