React
文章平均质量分 77
qq_45209973
这个作者很懒,什么都没留下…
展开
-
React--useEffect
使用 useEffect它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。Effect Hook 可以让你在函数组件中执行副作用操作import React, { useState, useEffect } from "react";function Counter () { const [count, setCount] = useState(0) useEffect(() => { console.log('Counter Ef原创 2022-05-27 19:02:56 · 3257 阅读 · 0 评论 -
React--render props
什么是 render props官网链接:https://react.docschina.org/docs/render-props.html术语 “render prop” 是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术render属性接收的一个函数,该函数返回一个React元素。也就是说,具有render props的组件使用外部传递进来的函数去子组件结构,而不是用自身的渲染逻辑使用示例1:import React from "react";fu原创 2022-05-18 15:48:26 · 323 阅读 · 0 评论 -
React--refs回调
refs创建 & 挂载官方文档:https://react.docschina.org/docs/refs-and-the-dom.html在React单向数据流中,props是父组件与子组件交互的唯一方式,要修改一个子组件,一般只能通过更新props重新渲染。在某些情况下,需要在典型数据流之外强制修改子组件,被修改的子组件可能是一个React组件实例,也可能是一个DOM元素ref属性附加到React元素上,以便访问。可以附加到以下几种节点:使用React.createRef()方法创原创 2022-05-17 20:24:10 · 557 阅读 · 0 评论 -
React--shouldComponentUpdate
shouldComponentUpdate 作用官方文档:https://react.docschina.org/docs/optimizing-performance.html使用方式:class Hello extends React.Component { shouldComponentUpdate(nextProps, nextState) { if (nextProps.greeting !== this.props.greeting) return true if原创 2022-05-16 11:45:52 · 223 阅读 · 0 评论 -
React--JSX
JSX是什么实际上, JSX 仅仅只是 React.createElement(component, props, …children) 函数的语法糖JSX能够提供给我们在JavaScript代码中编写HTML标签的能力这样做的好处:将HTML代码片段可以当做变量任意地进行赋值、传递和计算等操作,在使用上更加地灵活;使得结构(视图层HTML)与行为(逻辑层JS)相统一,都在同一个文件、函数中处理,编写、维护和复用更加地方便和高效以上仅个人见解如下的代码:function h原创 2022-05-13 15:51:22 · 130 阅读 · 0 评论 -
React--高阶组件(HOC)
高阶函数一个函数执行的返回结果还是一个函数时,它就是一个高阶函数,如下function debounce (fn, delay = 500, context) { let timer = null return function (...args) { if (timer) { clearTimeout(timer) } timer = setTimeout(() => { fn.apply(context, args) time原创 2022-05-12 19:24:21 · 1564 阅读 · 0 评论 -
React--Refs转发
基本使用在Vue和React中,ref都是框架(React是JavaScript库)提供给我们的一种直接操作DOM行为的方式,在Vue中的template模板中,不管是组件(会将外部传递的ref属性再传递给组件内部模板定义的根元素上)还是普通标签元素(如div、button),使用ref都能够引用到DOM元素但是在React中,普通的标签能够赋予ref直接引用,而对组件需要使用refs 转发普通标签元素用法如下:// Home.jsexport default class Home extends原创 2022-05-11 17:24:49 · 626 阅读 · 0 评论 -
深入认识 React 的 setState
组件为了能够维护自身的状态,设置了state为了能够让React跟踪到状态的变化,规定只能通过setState更新状态可能异步setState 的调用方式相当于 Object.assign(之前的state,新的state)然而,其实 setState 改变数据这个行为,有时候可能是异步的,也就是说,如果要立即获取改变后的状态,可能做不到如下的代码的大致过程:state 中声明了一个 nhtml 中的 button 注册了一个点击事件点击后,让 n + 1立即打印 n无论点击多少.原创 2020-07-09 10:13:27 · 179 阅读 · 0 评论