随笔分类 - react
9、使用递归来实现树形组件，及简单性能优化
摘要：父组件： 1 import React, { 2 Component 3 } from "react"; 4 import TreeNode from "../components/TreeNode"; 5 //数据源 6 const treeData = { 7 key: 0, //标识唯⼀性 8
8、弹窗组件
摘要：弹窗类组件的要求弹窗内容在A处声明，却在B处展示。react中相当于弹窗内容看起来被render到⼀个组件⾥⾯ 去， 实际改变的是⽹⻚上另⼀处的DOM结构。 父组件： 1 import React, { Component } from "react"; 2 import { Button } fr
7、react按需加载、装饰器配置
摘要：1、react按需加载、装饰器配置 使⽤第三⽅组件antd npm install antd --save 1 import React, { Component } from 'react' 2 import Button from 'antd/lib/button' 3 import "antd
6、react高阶组件HOC
摘要：高级组件概念： 为了提⾼组件复⽤率，可测试性，就要保证组件功能单⼀性； 但是 若要满⾜复杂需求就要扩展功能单⼀的组件，在React⾥就有了 HOC（Higher-Order Components）的概念， 定义：⾼阶组件是⼀个⼯⼚函数，它接收⼀个组件并返回另⼀个组 件。 1 import React
5、react卡槽
摘要：1 react分为聚名卡槽和匿名卡槽两种 2 3 4 5 import React,{Component} from 'react' 6 import Layout from './Layout' 7 import {Consumer} from '../Appcontent' 8 9 class
3、react 生命周期
摘要：官网地址：https://zh-hans.reactjs.org/docs/react-component.html#static-getderivedstatefrompropsV17可能会废弃的三个⽣命周期函数⽤getDerivedStateFromProps 替代，⽬前使⽤的话加上UNSAFE
4、react 父子组件传值
摘要：父传子： 3 父组件代码： 4 import React from 'react'; 5 import User from './pages/User' 6 import Search from './pages/Search' 7 8 function App() { 9 10 const con
2、react学习： react hooks简单使用
摘要：1 import React,{ useState,useEffect } from 'react' 2 function User(){ 3 const [date,setDate] = useState(new Date()); 4 const [date2,setDate2] = useSta
1、react 解决this.setState修改数据异步问题
摘要：解决异步： 1、nextState（推荐） import React from 'react' class Home extends React.Component{ constructor(props){ super(props); this.state = { data :0 } } compo
react-router-dom 的基本使用
摘要：1 安装：cnpm i react-router-dom 2 3 4 5 <Route path='/' exact render={()=><div>home</div>}></Route> 6 7 当路径为/根路径时候显示里面的内容home，exact 表示完全配置这个路径， 8 9 例如为ht
immutable库和redux-immutable库使用
摘要：文档目录 immutable使用 1、安装：cnpm i immutable 在reducer中引用 import { fromJS } from 'immutable'; const defaultState = fromJS ({ focused : false }); immutable对象s
styled-components用法
摘要：styled-components用法 定义样式 import styled from 'styled-components'; export const HeaderWrapper = styled.div` height:56px; background:red; ` 组件里面使用 import
react 简书项目1
摘要：1、项目初始化配置 styled-components让css项目互相不干扰 cnpm i styled-components 使用方法 import { createGlobalStyle } from 'styled-components'; export const Globalstyle =
react-redux1
摘要：安装react-redux cnpm i react-redux 文件目录 定义store文件 1 index.js文件： 2 3 import { createStore } from 'redux'; 4 import reducer from './reducer'; 5 const stor
Redux与Ant Design
摘要：redux安装 npm add redux Ant Design 安装 npm add antd 引入css import 'antd/dist/antd.css'; 组件使用 import { Input, Button,List, Typography, Divider } from 'antd
使用react-transition-group实现动画
摘要：安裝：cnpm i react-transition-group 详细介绍： https://reactcommunity.org/react-transition-group/css-transition /* 显示 */ /* fade-appear第一次显示执行的样式 */ .fade-ent
react中axios使用
摘要：在文件目录下执行安装命令： npm add axios 在文件中引入 import axios from 'axios' 使用范例： componentDidMount(){ axios.get('http://localhost:3001/todolist') .then((res)=>( thi
react生命周期
摘要：生命周期函数指在某一个时刻组件会自动调用执行的函数 https://zh-hans.reactjs.org/docs/react-component.html componentWillMount 在渲染前调用,在客户端也在服务端。 componentDidMount : 在第一次渲染后调用，只在客
React中ref的使用
摘要：res引用的意思，用来获取元素的dom，官方并不推荐 react新特性中res等于一个函数，这个函数会自动接收一个参数。这是代表构建了一个ref，通过this.input来指向 input Dom节点 之前使用e.target.value来获取input值，现在通过ref引用的this.input来
Props, State与render函数
摘要：当组件的state或者props发生改变的时候,render函数就会重新执行 当父组件的render函数被运行时，它的子组件render都将被重新运行一次
