React
TA_WORLD
这个作者很懒,什么都没留下…
展开
-
react源码 递阶段mount时阶段
react源码 递阶段mount时阶段原创 2022-10-08 22:55:35 · 384 阅读 · 0 评论 -
React 手写render方法,将虚拟DOM转为真实DOM
特点定义并使用函数式组件babel转译后的代码打印element发现我们可以看到element的type不再是div等标签,而是一个函数获取在父组件下的完整虚拟dom。原创 2022-09-09 21:42:47 · 575 阅读 · 0 评论 -
React 创建虚拟DOM与Babel转换原理
jsx代码Babel转换为js方法由方法创建虚拟DOM。原创 2022-09-09 21:39:18 · 267 阅读 · 0 评论 -
React 挂载完毕后初始化数据 注意点
变量进行赋值,但是修改后并不会使组件重新渲染,因此。内部存在着闭包,即内部定义的数据,外部无法使用。原创 2022-09-05 15:49:25 · 1080 阅读 · 0 评论 -
React 父组件调用子组件的方法
useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值。在大多数情况下,应当避免使用 ref 这样的命令式代码。原创 2022-08-29 22:11:14 · 410 阅读 · 0 评论 -
React 封装弹出框组件
css-in-js)的技术,即使用js编写css样式。alertList.tsx用于容纳弹出框的容器。index.tsx用于创建单个alert。use.tsx函数式调用alert组件。标签时,会转变为具有对应样式的。当HTML文档中识别到。原创 2022-07-26 22:28:30 · 2376 阅读 · 0 评论 -
React andt 日期选择框 DatePicker Moment对象转为String
因为andt中使用了moment.js的库,在使用moment()时需要引入库。类型的数组,但是这样子不方便进行对比判断,所以我们需要将其转为String。在使用andt的日期选择框的时候,得到的是一个。原创 2022-07-24 16:14:23 · 1501 阅读 · 0 评论 -
React useState存储函数
以上代码出现会出现的问题:解析:这其实是的另一种写法,如果初始 state 需要通过复杂计算获得,则可以传入一个函数,在函数中计算并返回初始的 state,此函数只在初始渲染时被调用:原创 2022-06-23 23:27:59 · 557 阅读 · 0 评论 -
React&Ts 组件传入可选函数,undefined问题处理
类型是一个函数,并且是可选类型当触发事件的时候就会调用的回调函数,在回调函数中又调用了函数但是因为是可选类型,所以不能直接调用,否则会出现error——不能调用可能是“未定义”的对象我们可以使用来处理问题,当组件中为传入时就不调用...原创 2022-06-22 23:21:33 · 832 阅读 · 0 评论 -
React 自定义Hook优化处理搜索筛选问题
在很多场景下,我们需要通过筛选多个条件来确定自己想要的结果,而这些筛选的条件会作为路由的参数传递给后端,以此获取到对应的数据Record类型Record类型的数据,键的类型取决于K,值的类型取决于T判断是否为空值使用确定筛选/搜索的键值此处我们传入,意味着之后对参数的修改只能是这两个键修改参数搭配useEffect副作用函数当我们修改search参数之后,组件重新渲染,那么数据将会更新...原创 2022-06-18 00:22:33 · 414 阅读 · 0 评论 -
React 组件循环渲染问题
React组件循环渲染问题原创 2022-06-15 23:16:11 · 2338 阅读 · 0 评论 -
React 错误边界
任意子组件树的渲染方法 和所有生命周期方法中的错误。以下使用Ts编写错误边界组件React.Component的泛型P代表S代表首先要对传入的进行类型规范ReactNode与ReactElement的关系是联合类型中的一种类型(可以理解为子集)React.PropsWithChildren使用这个React提供的泛型,可以减少对数据类型的说明...原创 2022-06-11 22:17:01 · 492 阅读 · 0 评论 -
react-query
React Query 通常被描述为 React 缺少的数据获取(data-fetching)库,但是从更广泛的角度来看,它使 React 程序中的获取,缓存,同步和更新服务器状态变得轻而易举。安装快速入门查询 Queries查询是一种对于与 唯一键值 相关联的异步数据源的声明性依赖。查询可以与任何基于Promise的方法(包括GET和POST方法)一起使用,以从服务器获取数据。如果您的方法修改了服务器上的数据,建议改用 Mutations要在你的组件或自定义 Hook 中订阅一个查询,至少需要以原创 2022-06-09 12:54:38 · 2086 阅读 · 0 评论 -
React css-in-js emotion
CSS-in-JS不是指某个具体的库,是指组织CSS代码的一种凡是,代表库有和使用以下演示代码处于同于文件中引入编写样式写法模板普通的写法是没有语法高亮和语法提示的,为了便捷开发,可以下载对应的插件替换组件样式的修改组件样式和普通标签样式的修改是不一样的使用的是antd中的组件...原创 2022-06-04 22:25:42 · 434 阅读 · 1 评论 -
React 安装及使用antd组件库
React 安装及使用antd组件库原创 2022-06-04 14:30:04 · 1111 阅读 · 0 评论 -
React 使用context对用户信息全局管理
React 使用context对用户信息全局管理原创 2022-06-01 22:09:26 · 655 阅读 · 0 评论 -
React 自定义Hook(挂载完毕、防抖)
React 自定义Hook重构 生命周期函数——挂载完毕export const useMount = (callback : Function) => { useEffect(() => { callback() },[])}防抖export const useDebounce = (value:any, delay:number) => { const [debouncedValue,setDebouncedValue] = useState(value原创 2022-05-28 22:18:05 · 857 阅读 · 1 评论 -
React 路由 react-router-dom
React 路由 react-router-dom一个路由就是一个映射关系(key:value)key为路径,value是component路由的实现是基于history文章目录React 路由 react-router-domBrowserRouter和HashRouterLink 普通导航组件NavLink 导航高亮组件高亮跳转Navigate 重定向组键Routes和Route路由表嵌套路由路由的params参数路由的search参数路由的state参数编程式路由导航useNavigate原创 2022-05-24 23:34:04 · 1891 阅读 · 0 评论 -
React 子向父传参
React 子向父传参编写 父组件 接收到子组件数据后的处理函数函数的参数即为 子组件传入的参数 addTodo = (newTodo) => { let {todos} = this.state todos = [newTodo,...todos] this.setState({ todos }) }将处理函数作为props传入子组件<Header addTodo={this.addTodo}/>子组件使用处原创 2022-05-22 16:30:32 · 533 阅读 · 0 评论 -
React 样式的模块化
React 样式的模块化每个组件的样式最好是独立的,否则会出现问题方法一css样式文件的命名我们常规都是以.css作为后缀,但是为了将样式模块化,我们需要将样式文件以.module.css作为后缀组件引入样式文件import hello from './index.module.css'使用样式类名<h2 className={hello.title}></h2>而我们样式文件中的写法为.title { font-size:35px;}原创 2022-05-20 21:58:19 · 460 阅读 · 0 评论 -
React 组件
React 组件函数式组件创建函数式组件function Demo(){ return <h2>函数定义的组件</h2>}渲染组件到页面React.render(<Demo/>, document.getElementById('test'))注意:函数式组件的函数名必须与渲染时的标签相同自定义组件的首字母为大写我们在函数式组件中查看this,发现此处的this是undefined,因为babel编译后开启了 严格模式functi原创 2022-05-19 21:41:56 · 54 阅读 · 0 评论 -
React Ref
React Ref何时使用Refs管理焦点,文本选择或者媒体播放触发强制动画继承第三放DOM库避免使用refs来做任何可以通过声明式实现来完成的事件创建RefRefs 是使用 React.createRef() 创建的,并通过 ref 属性附加到 React 元素。在构造组件时,通常将 Refs 分配给实例属性,以便可以在整个组件中引用它们。class MyComponent extends React.Component { constructor(props) {原创 2022-05-19 15:57:45 · 111 阅读 · 0 评论 -
React props
Reace props当 React 元素为用户自定义组件时,它会将 JSX 所接收的属性(attributes)以及子组件(children)转换为单个对象传递给组件,这个对象被称之为 “props”。function Welcome(props) { return <h1>Hello, {props.name}</h1>;}const element = <Welcome name="Sara" />;const root = ReactDOM.cre原创 2022-05-19 15:56:35 · 83 阅读 · 0 评论 -
React 事件绑定
React 事件绑定事件的绑定在JSX中,对事件进行了再次的封装,绑定事件的写法有些许不同,JSX中事件的绑定使用驼峰命名法事件名写法点击onClick改变onChange。。。。。。代码的编写class Weather extends React.Component{ constructor(props){ super(props) this.state = { isHot:false原创 2022-05-18 00:14:06 · 238 阅读 · 0 评论 -
React jsx语法规则
React jsx语法规则定义虚拟DOM时,不要写引号const VDom = ( <div> <span>123</span> </div>)标签中混入JS表达式时要用{}const num = 1const VDom = ( <div> {num} </div>)样式的类名指定不要用class,要用classNameconst VDom = ( <div c原创 2022-05-16 21:52:46 · 125 阅读 · 0 评论