React

第一步，根据UI图确定数据格式 来自有良好感觉的UI设计： 首先，这块分为上方标题和下方步骤图两个部分： 上方是一个h5标题不必多说 下方是一个超出固定宽度有滚动条的盒子，这里盒子我用的是H5的语义化

一、路由的基本使用 明确好界面中的导航区、展示区 导航区的a标签改为Link组件 展示区写Route组件进行路径的匹配 <App>最外层包裹一个<BrowserRouter>或<HashRouter>

Class组件的生命周期 React组件的生命周期分为三个阶段 1）挂载阶段（Mounting），这个阶段会从组件的初始化开始，一直到组件创建完成并渲染到真实的DOM中 2）更新阶段（Updating

使用方式 先定义一个dataSet数据集 然后，传入QueryMoreBar的几个必须属性props，dataSet、queryFunction等 运行yarn start命令就可以看到页面了 Que

Form表单无非做了一下几件事： 数据收集 数据传递 数据响应式 表单校验 表单提交 useForm-数据仓库 Form表单里的input、radio这些数据项需要做成受控组件，传统的做法是放到For

父组件向子组件通信 父组件以自身的state作为子组件的props，父组件调用setState，则子组件的props发生变化，触发重新渲染 通过ref调用子组件的方法，不过这个只在子组件时类组件时有用

只能在函数最外层调用Hook。不要再循环、条件判断或者子函数中调用 只能在React的函数组件中调用Hook或者在自定义的Hook中调用。不要再其他Javascript函数中调用 setState函数用于更新state。接收一个新的state值并将组件的一次重新渲染加入队列；当…

React中有自己的事件系统模式，即通常被称为React合成事件。之所以采用这种自己定义的合成事件，一方面是为了抹平差异性，使得React开发者不需要自己再去关注浏览器事件兼容性问题，另一方面是为了统一管理事件，提高性能，这主要提现在React内部实现事件委托，并且记录当前事件…

完全可选。无需重写任何已有代码就可以在一些组件中尝试Hook 100%向后兼容。Hook不包含任何破坏性改动 现在可用。Hook发布于v16.8 React没有提供将可复用行为‘附加’到组件的途径(例如，把组件连接到store)，比如render props和高阶组件，但这类方…

调用React的render()方法会创建一颗由React元素组成的树，在下一次state、props或context更新时候，相同的render()方法会返回一颗不同的树。React需要基于这两颗树之间的差别来判断如何有效的更新UI以保证当前UI与最新的树保持同步 此方法将在…

what：用Javascript对象表示DOM信息和结构，当状态变更的时候，重新渲染这个Javascript对象结构。这个Javascript对象称为Virtual DOM why：之所以用虚拟dom，是因为DOM操作很慢，轻微的操作都可能导致页面重新排版，非常耗性能。相对于D…

生命周期描述的是组件从创建到卸载的一个完整过程。React提供了一系列生命周期函数，如：初次渲染到DOM中，组件更新完成，组件卸载之前等。 2、static getDerivedStateFromProps(props,state)，该方法用于从props中获取state，在挂…

react-router包含三个库，react-router、react-router-dom和react-router-native。react-router提供最基本的路由功能，实际使用的时候根据应用运行的环境选择安装react-router-dom(在浏览器中使用)或re…

useReducer是useState的替代方案。它接收一个形如(state, action)=>newState的reducer，并返回当前的state以及配套的dispatch方法 该Hook接收一个包含命令式、且可能有副作用代码的函数。在函数组件主体内(这里指在React…

之所以叫reducer，是和Array.prototype.reduce(reducer, initialValue)里的回调函数属于相同的类型。

Context.Provider：Provider接收一个value属性，传递给消费组件，允许消费组件订阅context的变化。一个Provider可以和多个消费组件有对应关系。多个Provider也可以嵌套使用，里层的会覆盖外层的数据 当Provider的value值发生变化…