react.js
react.js的点点滴滴
何曼联
这个作者很懒,什么都没留下…
展开
-
react Hooks :useRef的使用
//useRef 作用 获取子组件或者DOM节点的句柄,渲染周期之间共享数据的存储import React, { useState, useEffect, PureComponent, useMemo, useRef, useCallback } from 'react'//函数组件获取不了refclass Counter extends PureComponent { speak = () => { console.log('speak', this.props.count原创 2021-03-20 02:04:14 · 734 阅读 · 0 评论 -
react Hooks :useMemot的使用
import React, { useState, useMemo } from 'react'function Counter(props) { return ( <h1>{props.count}</h1> )}function APP(props) { const [count, setCount] = useState(0) const double = useMemo(() => { return count * 2原创 2021-03-20 00:52:28 · 169 阅读 · 0 评论 -
react Hooks :useContext的使用
import React, { Component, useState, createContext, useContext } from 'react'const countContext = createContext()//创建Context实例对象// 基础写法class Foo extends Component { render() { return ( <countContext.Consumer> { cou.原创 2021-03-20 00:22:50 · 163 阅读 · 0 评论 -
react Hooks :useEffect的使用
什么是副作用?在特定的状态、节点、时机下,要做特定的行为,这些行为置身于组件渲染之后,通通称之为副作用,绑定事件,网络请求,访问DOM元素,通通称之为副作用,副作用时机在Mount之后,Update之后,Unmount之前,这三者分别是ComponentDidMount,componentDidUpdate,componentWillUnmountuseEffect怎么用?useEffect在render之后调用,也可以通过自定义状态来决定调用和不调用,第一次调用相当于ComponentDidMoun原创 2021-03-19 23:36:32 · 268 阅读 · 0 评论 -
react Hooks :useState的使用,以及设置回调
react普通class组件import React, { Component} from 'react'export default class App extends Component { state = { count: 0 } render() { const { count } = this.state return ( <div> <button type="button"原创 2021-03-19 11:15:37 · 2242 阅读 · 0 评论 -
react 指定组件进行渲染.,防止多余渲染的三个方法
方法一:使用生命周期函数shouldComponentUpdate()import React, { Component } from 'react'class Foo extends Component { shouldComponentUpdate(nextProps, nextState) { //两个参数nextProps和nextState,表示下一次props和一次state的值 //生命周期函数shouldComponentUpdate()默认返回ture,返回fa原创 2021-03-18 01:40:50 · 1318 阅读 · 0 评论 -
react Lazy与Suspense实现延迟加载(懒加载)
import React, { Component, lazy, Suspense } from 'react'const About = lazy(() => import('./About.jsx'));//lazy是一个方法,它封装了“动态加载的过程”//About是一个React组件,但它并不能被渲染,它只是一个“动态加载过程”的封装。它在要被渲染的时候就会去加载真正的About组件export default class IndexPage extends Component {原创 2021-03-18 00:13:58 · 451 阅读 · 0 评论 -
react 静态属性ContextType访问跨层级组件的数据
import styles from './index.less';import React, { Component, createContext } from 'react'const BatteryContext = createContext(0);//创建createContext实例对象,必须传一个默认值,默认值的意义就是Consumer向上找不到对于的Provider就会展示该默认值class Leaf extends Component { static contextTyp原创 2021-03-17 23:31:49 · 397 阅读 · 0 评论 -
react Context实现跨层级传递数据的基础使用
Context作用:提供了一个无需为每层组件手动添加 props,就能在组件树间进行数据传递的方法import styles from './index.less';import React, { Component, createContext } from 'react'const BatteryContext = createContext(0);//创建createContext实例对象,必须传一个默认值,默认值的意义就是Consumer向上找不到对于的Provider就会展示该默认值原创 2021-03-17 00:28:05 · 279 阅读 · 0 评论 -
react.js之无状态组件
//当一个组件只有render函数的时候,就可以用无状态组件定义这个组件,其实无状态组件就是一个函数//无状态组件的性能比较高,就只是一个函数正常定义import React from 'react';import { Input, Button, List } from 'antd';class ToDoListUI extends Component { render() { return ( <div style={{ m.原创 2020-11-16 08:45:12 · 119 阅读 · 0 评论 -
ToDoList 与antd和redux的结合
ToDoList.jsimport React, { Component } from 'react';import { getInputChangeAction, getButClickAction, getDeleteItem } from './store/actionCreators';import ToDoListUI from './ToDoListUI';import 'antd/dist/antd.css';import store from './store'class原创 2020-11-15 17:24:17 · 101 阅读 · 0 评论 -
react.js使用TransitionGroup和CSSTransiton对多个div进行动画操作
Animation.jsimport React, { Component, Fragment } from 'react';import { CSSTransition, TransitionGroup } from 'react-transition-group';//TransitionGroup用于对多个div进行动画操作import './Animation2.css'class Animation extends Component { constructor(props)原创 2020-11-10 09:23:28 · 297 阅读 · 0 评论 -
react动画的两种写法
1、用原生的css来写Animation.jsimport React, { Component, Fragment } from 'react';import './Animation.css'class Animation extends Component { constructor(props) { super(props) this.state = { show: true } this.原创 2020-11-10 09:14:05 · 704 阅读 · 0 评论 -
react.js 将TodoList拆分成一个个组件
TodoList.jsimport React, { Component, Fragment } from 'react';import ToDoItem from './ToDoItem';import Test from './Test';class ToDoList extends Component { constructor(props) { //constructor是一个构造函数,每个类都有,是最先被执行的函数 super(props)原创 2020-11-10 08:47:45 · 204 阅读 · 1 评论 -
react.js 第一个最原始的TodoList
ToDoList.jsimport React, { Component, Fragment } from 'react';class ToDoList extends Component { constructor(props) { //constructor是一个构造函数,每个类都有,是最先被执行的函数 super(props) //super(props)指的是要调用父类的构造函数 this.state = {原创 2020-11-10 08:34:23 · 137 阅读 · 0 评论