![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
文章平均质量分 69
、昔年
这个作者很懒,什么都没留下…
展开
-
react-virtualized虚拟滚动list
import React from ‘react’;import ReactDOM from ‘react-dom’;import { InfiniteLoader, List } from ‘react-virtualized’;import ‘react-virtualized/styles.css’; // only needs to be imported once// This example assumes you have a way to know/load this informa原创 2021-11-20 21:01:13 · 1694 阅读 · 1 评论 -
React PureComponent、shouldComponentUpdate、meno
React PureComponent、shouldComponentUpdate、meno使用PureComponent、shouldComponentUpdate、meno可以提高react界面的性能在React 开发的过程中,当一个组件的state或props改变时候,React 会将最新返回的元素和之前渲染的元素进行比较,以确定是否有必要更新DOM,当发生改变时候回触发Dom的重新渲染即使 React 只更新改变了的 DOM 节点,重新渲染仍然花费了一些时间。在大部分情况下它并不是问题,不过如原创 2021-10-17 14:05:02 · 229 阅读 · 0 评论 -
React-refs
refs作用1.获取子组件的元素的dom2.获取子组件的数据获取子组件的元素的dom步骤我们通过调用 React.createRef 或者 useRef 创建了一个ref 并将其赋值给 ref 变量。我们通过指定 ref 为 JSX 属性,将其向下传递给 <Compoment ref={ref}>。React 传递 ref 给 forwardRef 内函数 (props, ref) => ...,作为其第二个参数。我们向下转发该 ref 参数到 <button re原创 2021-10-17 14:00:15 · 107 阅读 · 0 评论 -
React.context
React.contextcontext作用在一个典型的 React 应用中,数据是通过 props 属性自上而下(由父及子)进行传递的,但此种用法对于某些类型的属性而言是极其繁琐的(例如:地区偏好,UI 主题),这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式,而不必显式地通过组件树的逐层传递 props。什么时候使用contextContext 设计目的是为了共享那些对于一个组件树而言是“全局”的数据,例如系统的cookie、公用方法、用户信息等数据使原创 2021-10-17 13:59:25 · 102 阅读 · 0 评论 -
React-路由2
路由重定向路由重定向使用的是react-router-dom的Redirect组件import { BrowserRouter as Router, Link, Route, Redirect } from 'react-router-dom'import React from 'react'// 定义一个登录组件function Login() { return ( <div> 登录界面组件 </div>原创 2020-12-13 01:05:09 · 84 阅读 · 0 评论 -
React-路由
React路由根据不同的路径显示不同的组件内容,使用react-router-dom库安装:npm install react-router-dom下面例子中,通过export暴露App类,返回index.js中使用渲染,下面代码中,需要注意的是,Router的div内容是正常显示的,其中使用的exact为精确匹配import React from 'react'import { BrowserRouter as Router, Link, Route } from 'react-router-原创 2020-12-13 00:16:09 · 676 阅读 · 0 评论 -
React-插槽
React插槽插槽用于组件中预留位置,就可以添加内容,这些内容可以被识别和控制,React需要自己开发支持插槽功能原理:组件中写入的HTML,可以传入到props先看下面代码,直接写内容在组件内是不起作用的,这时候在组件中输出propsimport React from 'react';import ReactDOM from 'react-dom';import './index.css';class ParentCom extends React.Component { rende原创 2020-12-12 23:18:08 · 243 阅读 · 0 评论 -
React-完成生命周期
React的生命周期生命周期的三个状态Mounting:将组件插入dom中Updating:将数据更新到dom中Unmounting:将组件移出dom中生命周期中的钩子函数ComponentWillMount:组件将要被渲染,可以使用AJAX获取数据,添加动画前的类ComponentDidMount:组件渲染完毕,可以添加动画ComponentWillReceiveProps:组件将要接受props数据,查看接收props是什么数据ShouldComponentUpdate:组件接收原创 2020-12-02 20:19:51 · 82 阅读 · 0 评论 -
React-列表渲染
React并没有Vue的v-for这种列表渲染方式使用for进行列表渲染import React from 'react'import ReactDOM from 'react-dom'// 列表渲染class Test extends React.Component { constructor (props) { super(props) this.state = { list: [ {原创 2020-12-02 14:51:52 · 473 阅读 · 1 评论 -
React-事件详解
特点react事件使用驼峰命名法事件需要用{}括起来,例如:onClick={show}最简单的点击事件import React from 'react'import ReactDOM from 'react-dom'class Parent extends React.Component { render () { return ( <div> <button onClick={this.原创 2020-11-30 16:13:39 · 269 阅读 · 0 评论 -
React-父子组件通信
父组件通过props传递值给子组件父组件传递数据给子组件,为单项数据流props传地址可以为任意类型props可以设置默认值xxx.defaultProps = { name: '张三' }import React from 'react';import ReactDOM from 'react-dom';import './index.css';// 定义父组件class Parent extends React.Component { constructor(原创 2020-11-30 12:29:49 · 107 阅读 · 0 评论 -
React-类组件事件
Tab组件的功能:通过点击按钮,切换不同的tab在lTab组件中定义了clickEvent方法,但是需要注意的是,需要注意this的指向问题,需要在构造函数中修改this指向,this.clickEvent = this.clickEvent.bind(this)两个按键同时绑定clickEvent事件,需要在button标签添加属性进行辨别,通过data-xxx=‘xxx’来进行辨别,在clickEvent中,通过e.target.dataset.xxx可以获取到data-xxx的值需要注意,一定原创 2020-11-30 11:14:25 · 452 阅读 · 0 评论 -
React-生命周期函数
componentDidMount是React的生命周期函数,是组件渲染完成时的回调函数需要注意的是,不能直接通过this.state.xxx = xxx,这种方法是不推荐的,同时这种修改方法不会触发React修改界面,只有使用this.setState()才可以使、界面重新渲染this.setState()函数内容都进行设置之后,同意对比虚拟DOM对象,然后统一修改,提高性能import React from 'react'import ReactDOM from 'react-dom'cl原创 2020-11-30 10:43:39 · 98 阅读 · 0 评论 -
React-state(状态)
state相当于vue的data,也就是用于存放数据,但使用上和data却很不一样下面例子中,创建一个类组件,在类组件的构造函数constructor中定义this.state,并进行赋值,在render()函数中,直接使用this.state.xxx即可访问state的数据import React from 'react'import ReactDOM from 'react-dom'class Clock extends React.Component { constructor (原创 2020-11-30 10:17:25 · 181 阅读 · 0 评论 -
React-组件
函数式组件函数式组件是通过写一个function,returnUI模板,其中function中可以写变量和逻辑在return的模板中如果想要使用定义的变量,直接使用{}括起来即可import React from 'react'import ReactDOM from 'react-dom'// 函数式声明// 函数组件return模板function Children() { // 既然这是一个函数,这里面可以写变量和逻辑 const title = <h2>原创 2020-11-29 10:31:13 · 67 阅读 · 0 评论 -
React-样式
元素中不可以存在多个className、style属性,不会自动拼接在样式中,使用驼峰命名法,或者使用-连接并使用引号引起来多个类使用可以{},里面进行字符串拼接,或者使用数组[].join(’ '),下面详述添加样式时候直接通过style关键字和{}使用即可import React from 'react'import ReactDOM from 'react-dom'const exampleStyle = { background: 'skyblue', border.原创 2020-11-28 10:30:01 · 236 阅读 · 0 评论 -
React-JSX
JSX优点:JSX执行更快,编译为jasvascript速度更快,进行了优化类型更安全,编译过程如果出错就不能编译,及时发现错误JSX编写模板更加简单快捷注意:JSX必须要有唯一的根节点正常的html元素要小写,大写默认为组件JSX表达式{}由html元素构成中间如果需要插入变量使用{}{}可以使用表达式{}中间表达式中可以使用JSX元素属性和html内容一样都是用{}来插入内容JSX表达式最基本的+运算import React from 'reac原创 2020-11-28 09:54:55 · 79 阅读 · 0 评论 -
React-函数式组件声明
React函数式组件声明需要注意的是,函数式组件声明的组件名需要大写绑定属性时候,直接这样既可 <Clock date={new Date()} />组将==组件声明时候,props可以获取父组件传过来的属性值import React from 'react';import ReactDOM from 'react-dom';import './index.css';const root = document.getElementById('root')function C原创 2020-11-28 09:54:07 · 837 阅读 · 0 评论 -
React元素渲染
我们先从index.js文件开始说,先看默认的index.js文件ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root'));import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App原创 2020-11-28 09:25:40 · 202 阅读 · 0 评论 -
react起步create-react-app
React是构建用户界面的javascript库,主要用于构建UI界面。Instagram,2013年开源特点声明式的设计高效,采用虚拟dom来实现dom的渲染,最大限度减少dom的操作灵活,跟其他库灵活搭配使用JSX,俗称JS里面写HTML,javascript语法的扩展组件化,模块化,代码容易复用单向数据流,没有实现数据双向绑定,数据=>视图=>事件=>数据创建项目通过script引入使用,仅用于学习与调试<script crossorigin src原创 2020-11-28 08:56:52 · 91 阅读 · 0 评论