![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 67
Whxiaoxiaoya
这个作者很懒,什么都没留下…
展开
-
React中的hooks
一.useStateuseState会帮助我们定义一个 state变量,useState 是一种新方法,它与 class 里面的 this.state 提供的功能完全相同。一般来说,在函数式组件中退出后变量就会”消失”,而 state 中的变量会被 React 保留。useState接受唯一一个参数,在第一次组件被调用时使用来作为初始化值(也可以是一个回调函数)。(如果没有传递参数,那么初始化值为undefined)。const [state, setstate] = useState(() =&原创 2022-01-25 16:58:21 · 681 阅读 · 0 评论 -
React的fragment使用
在开发中,我们总是在一个组件中返回内容时包裹一个div元素:希望可以不渲染这样一个div应该如何操作呢?使用fragment,它允许将子列表分组,而无需向 DOM 添加额外节点;短语法: <> </>;注意: 如果我们需要在Fragment中添加key,那么就不能使用短语法!...原创 2022-01-13 13:24:19 · 265 阅读 · 0 评论 -
react中Portals的使用
某些情况下,我们希望渲染的内容独立于父组件,甚至是独立于当前挂载到的DOM元素中(默认都是挂载到id为root的DOM元 素上的)。例如:实现全局Model;portal:第一个参数(child): 是任何可渲染的 React 子元素,例如一个元素,字符串或 fragment;第二个参数(container): 是一个 DOM 元素,用于挂载child;使用:ReactDOM.createPortal(child,container )示例演示:...原创 2022-01-13 13:18:54 · 220 阅读 · 0 评论 -
react中的高阶组件
什么是高阶函数?高阶函数的维基百科定义:至少满足以下条件之一:接受一个或多个函数作为输入;输出一个函数;JavaScript中比较常见的filter、map、reduce都是高阶函数;什么是高阶组件呢?1. 高阶组件的英文是 Higher-Order Components,简称为 HOC; 2. 官方的定义:高阶组件是参数为组件,返回值为新组件的函数;3. 组件是将 props 转换为 UI,而高阶组件是将组件转换为另一个组件;4.高阶组件并不是React API的一部分,它是基原创 2022-01-13 12:14:46 · 1049 阅读 · 0 评论 -
React中的受控组件和非受控组件
在 HTML 中,表单元素(如、 和 )之类的表单元素通常自己维护 state,并根据用户输入进行更新;React 中,可变状态(mutable state)通常保存在组件的 state 属性中,并且只能通过使用 **setState()**来更新, 将两者结合起来:使React的state成为“唯一数据源”,;渲染表单的 React 组件还控制着用户输入过程中表单发生的操作(change);被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”.推荐使用受控组件,可以避免对re原创 2022-01-12 19:38:39 · 110 阅读 · 0 评论 -
react的样式
前端已经是组件化的天下,而CSS的设计并不是为组件化而生的,所以在目前组件化的框架中都需要一种合适的CSS解决方案; React官方并没有给出React中统一的样式风格, 因此 从普通的css,到css modules ,再到css in js 等 ,有几十种不同的解决方案,上百个不同的库;在组件化中选择的合适CSS解决方案应该符合以下条件:可以编写局部CSS,具备局部作用域,不会随意污染其他组件中的元素;可以编写动态的CSS,可以获取当前组件的一些状态,根据状态的变化生成不同的css样式;支持所原创 2022-01-12 18:41:04 · 1011 阅读 · 0 评论 -
react中ref的使用
在React的开发模式中,通常情况下不需要、也不建议直接操作DOM原生,但是某些特殊的情况,确实需要获取到DOM进行某些操作:管理焦点,文本选择或媒体播放;触发强制动画;集成第三方 DOM 库;如何创建refs来获取对应的DOM?方式一:传入字符串使用时通过 this.refs.传入的字符串格式获取对应的元素; constructor函数中创建: this.titleRef = createRef(); {/* <h2 ref=字符串/对象/函数>Hello Rea原创 2022-01-11 19:57:05 · 201 阅读 · 0 评论 -
react性能优化
一.React更新机制1. react的渲染流程:#mermaid-svg-K1nxqArMDzQRpVAZ .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-K1nxqArMDzQRpVAZ .label text{fill:#333}#mermaid-svg-K1nxqArMDzQRpVAZ .node r原创 2022-01-11 19:00:34 · 419 阅读 · 0 评论 -
react 中的 setState
一.为什么使用setState?在开发react项目时,我们并不能直接通过修改state的值来让界面发生更新,修改了state之后,希望React根据最新的State来重新渲染界面,但是这种方式的修改React并不知道数据发生了变 化;React并没有实现类似于Vue2中的Object.defineProperty或者Vue3中的Proxy的方式来监听数据的变化;需要通过setState来告知React数据已经发生了变化, setState方法是从Component中继承过来的:二.se原创 2022-01-07 17:37:41 · 693 阅读 · 0 评论 -
组件间的通讯-React篇
React组件间的通讯1. 父组件传递子组件 - 类组件和函数组件类组件:函数组件:传入数据类型校验(属性验证 - propTypes) 以及 默认值设置(defaultProps):2.子组件传递父组件同样是通过props传递消息,只是让父组件给子组件传递一个回调函数,在子组件中调用这个函数即可;3.跨组件间的通讯方式一: 通过上面的props,一层层的传递;方式二: 通过context;方式三: 事件总线;方式四 redux - 后续更新方式二:contextR原创 2022-01-07 16:41:36 · 67 阅读 · 0 评论