react缓存函数的方法
1、原理应该是把Alive组件下的dom挂载到Provider组件的display：none的一个节点，当路由切回来时，在从provider中找之前挂在的alive dom。作者已经帮我们实现了，用就是了。
2、搭配 react-router 工作的、带缓存功能的路由组件，类似于 Vue 中的 keep-alive 功能。
3、解决方法就是准备一个聊天对话界面的样板，在app启动的时候将它预先加载。当需要渲染的时候，只需要将修改对应的值就可以，退去时不要去销毁它，直接cache下来留给下次使用。
4、因为每次渲染都会执行，如果转换数据的方法开销比较大，建议使用useCallback将select函数缓存起来。初始化数据，也就是数据没有缓存时直接展示的内容，当缓存中有该数据时，则不会生效。
react表单和绑定事件及state和props-04
双向数据绑定在vue中有，在react中是没有的，双向数据绑定就是双方的数据改变相互影响，下面只是模拟双向数据绑定：上面的的value需要事件监听，这里面有一个react的知识点： 约束性组件和非约束性组件 。
咱们可以通过在父组件当中设置State，然后通过在子组件上使用props来接收收父组件的state值。为了保证咱们的组件被正确使用，React提供了可以对Props进行验证的功能PropTypes。
在react组件的生命周期函数中，this指向当前组件 在react class定义的组件中，constructor构造方法中需要通过调用super()方法生成this，这时this指向当前组件；否则不存在this，使用会报错。
props 默认情况下，组件没有状态。下面是以函数组件为例，最简单的参数：props 由父组件设置的信息，尽管可以设置默认值，并且不能改变它。state 主要用于用户的事件状态的管理，它应是一个可序列化的数据。
props和state都是用于描述component状态的，并且这个状态应该是与显示相关的。State 如果component的某些状态需要被改变，并且会影响到component的render，那么这些状态就应该用state表示。
也就是说当绑定的事件改变了state或者props，render函数就会重新执行解析页面，这个时候解析的时候就会使用新的数据了，所以页面就会变化。
浅谈react中的state和ref
1、state状态是React组件的核心。状态是数据的来源，必须尽可能简单。基本上，状态是决定组件渲染和行为的对象。与props不同，它是可变的，并创建动态和交互式组件。通过this.state()访问。
2、React提供的这个ref属性，表示为对组件真正实例的引用，其实就是ReactDOM.render()返回的组件实例；ref 可以挂载到组件上也可以是dom元素上；Q：ref属性可以设置为一个回调函数 React 支持给任意组件添加特殊属性。
3、在 React 中，数据是自顶而下单向流动的，即从父组件到子组件。React的数据传输主要靠state和props来完成。如果顶层组件初始化 props，那么 React 会向下遍历整棵组件树，重新尝试渲染所有相关的子组件。
4、ref是React提供的用来操纵React组件实例或者DOM元素的接口。ref可以作用于：React组件有两种定义方式：将ref回调函数作用于某一个React组件，此时回调函数会在当前组件被实例化并挂载到页面上才会被调用。
react中的生命周期函数
react生命周期：指的是一个React组件在创建到销毁经过的一系列过程，基本可以分为挂载、更新和卸载三个周期（可能表述不太精准）。
React的生命周期图：constructor()中完成了React数据的初始化，它接受两个参数：props和context，当想在函数内部使用这两个参数时，需使用super()传入这两个参数。
首先，我们先了解一下 React 的生命周期钩子函数。如图所示，我们可以将其分为俩个阶段--- render 阶段执行和 commit 阶段执行。
React中ref的使用
Refs是使用属性创建的，React.createRef()并通过ref属性附加到React元素。在构造组件时，通常将Refs分配给实例属性，以便可以在整个组件中引用它们。
ref 可以挂载到组件上也可以是dom元素上；Q：ref属性可以设置为一个回调函数 React 支持给任意组件添加特殊属性。ref 属性接受一个回调函数，它在组件被加载或卸载时会立即执行。
使用：先使用 React.forwardRef；再使用 connect 包一层会使 ref 属性漏掉，导致 内部实例无法传到外部；正确的操作方式要调整高阶组件的顺序，先用connect包裹，然后再用React.forwardRef包裹。
react中获取dom有以下提供三种方法：react原生函数findDOMNode获取dom 通过ref来定位一个组件，切记ref要全局唯一（类似id）ref Callback 属性 React支持一种非常特殊的属性，你可以附加到任何的组件上。
但是对于有些重复使用的组件，可能有用。例如某些input组件，需要控制其focus，本来是可以使用ref来控制，但是因为该input已被包裹在组件中，这时就需要使用Ref forward来透过组件获得该input的引用。
ref接口功能是为React提供的用来操纵React组件实例或者DOM元素的接口，可以在DOM中的某些元素被增加或删除的时候帮助React识别哪些元素发生了变化，因此应当给数组中的每一个元素赋予一个确定的标识。
以上内容为新媒号(sinv.com.cn)为大家提供！新媒号，坚持更新大家所需的前端知识。希望您喜欢！
版权申明：新媒号所有作品（图文、音视频）均由用户自行上传分享，仅供网友学习交流，不声明或保证其内容的正确性，如发现本站有涉嫌抄袭侵权/违法违规的内容。请发送邮件至 k2#88.com(替换@) 举报，一经查实，本站将立刻删除。
