![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
要叫我大哥
我这个人很懒,啥也没有留下,留下来一坨坨
展开
-
14react之路由Route
1.安装npm install react-router-dom --save2.简单使用这个是点击跳转的操作:<Link className="list-group-item" to="/about">About</Link>这个是展示路由组件的区域:component属性就是放展示的组建的<Route path="/about" component={About}/>完整代码展示:import React, { Component } from '原创 2021-05-19 11:02:52 · 62 阅读 · 0 评论 -
13react之react-redux
1.安装npm install redux --save(用于中间键applyMiddleware和createStore)npm install react-redux --save(用于装饰器写法connect)npm install --save prop-types(监听数据格式传递是否正确)redux-thunk:npm install redux-thunk --save(用于thunk,可以异步加载)redux-logger: npm install redux-原创 2021-05-19 10:12:27 · 107 阅读 · 0 评论 -
12react之useMemo和memo
useMemo: 第一个参数是函数,第二个参数是监听的值是否变化,如果变化才会执行useMemo里面的函数,//类似于计算属性computedmemo : 和PureComponent一样的功能,只是mome用在函数组件中(只有当state里面的值变化了才会执行render函数)(高阶函数的写法)function App() { const [name, setName] = useState('名称') const [content,setContent] = useState原创 2021-05-19 09:43:44 · 771 阅读 · 0 评论 -
11react的hook之useReducer
useReducer:useReducer的用法,看代码注释import React, { useReducer } from 'react';const initState = {count:0};const reducer = (state,action)=>{ //根据dispatch的action,去更新state switch(action.type){ case "reset": return initState;原创 2021-05-19 09:29:03 · 71 阅读 · 0 评论 -
10.react的hook之useCallback
useCallback是函数组件,类似于userEffect,第一个参数是函数,第二个参数是数组,监听的值变化的时候才会执行当前的函数function Form() { const [text, updateText] = useState(''); const handleSubmit = useCallback(() => { console.log(text); }, [text]); // 每次 text 变化时 handleSubmit 都会变原创 2021-05-18 11:59:30 · 621 阅读 · 0 评论 -
09react的hook之useEffect
useEffect:useEffect是 componentDidMount,componentDidUpdate,componentWillUnmount这几个生命周期函数的统一用法如下useEffect(()=>{//副作用逻辑// xxxxxreturn ()=>{//return一个函数,用于组件卸载前执行的代码}},[])备注: 1.空数组表示只执行一次,相当于componentDidMount。 2.非空数组,useEffect会在数组发生改变后执行原创 2021-05-18 11:54:56 · 91 阅读 · 0 评论 -
08react的hook之useState
两个参数:一个是变量,一个是函数。useState是hook,传入的参数是变量的默认值 //const [count, setCount] = useState(0);import React, { useState } from 'react';// 两个参数:一个是变量,一个是函数。useState是hook,传入的参数是变量的默认值 //const [count, setCount] = useState(0);function UseState() { const [count原创 2021-05-18 11:52:25 · 120 阅读 · 0 评论 -
07高阶组件
组建通信之上下文:1.定义变量const MyContext = React.createContext()const {Provider, Consumer} = MyContext;2 定义的父组件中,传入的属性需要时value, ChildrenComponents是第一级子组建名称,store是定义的一个变量<Provider> <ChildrenComponents value={this.state.store}></ChildrenCom原创 2021-05-18 11:50:10 · 107 阅读 · 0 评论 -
06 react _DOM的Diffing算法
_DOM的Diffing算法:虚拟DOM中key的作用:1). 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。 2). 详细的说: 当状态中的数据发生变化时,react会根据【新数据】生成【新的虚拟DOM】, 随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较,比较规则如下: a. 旧虚拟DOM中找到了与新虚拟DOM相同的key: (1).若虚拟DOM中内容没变, 直接使用之前的真实DOM原创 2021-05-18 11:42:20 · 64 阅读 · 0 评论 -
05react中ant-design样式框架使用
ant-design样式框架:安装:npm install antd --save2.对antd进行按需加载,配置之后就不需要进行css引入1)安装制定版本的,否则会报错:npm install react-app-rewired@2.0.2 --save-dev修改package.json“script”:{“start”:“react-app-rewired start”,“build”:“react-app-rewired build”,“test”:“react-app-rewi原创 2021-05-18 11:13:57 · 211 阅读 · 0 评论 -
04react组件生命周期
react组件生命周期:import React, { Component } from 'react';class demo extends Component { // 1.dom挂载的时候执行函数 //1).componentWillMount //组建将要挂载 可以调用api,但是不能dom操作 //2).componentDidMount //组建已经挂载 可以进行dom操作,对状态操作 // 2.下面是state/props发生变化的时候执行的原创 2021-05-18 11:00:32 · 40 阅读 · 0 评论 -
03react组件传值
组件传值:知识点:组件直接用props传值class ParentDemo extends React.Component{ constructor(props){ super(props) this.state = { list:[], } } render(){ return <Fragment> <ul> { thi原创 2021-05-18 10:48:39 · 124 阅读 · 0 评论 -
02.react组件的编写和各种属性的绑定写法
组建—属性知识点:1.state和props用法2.setState用法3.react中点击事件写法4.ref的使用import React,{Fragment} from "*****"import ReactDOM from "***"let user = { name:"name111", age:12, gender:"男"}class Movie extends React.components{ constructor(props){原创 2021-05-18 10:43:23 · 179 阅读 · 0 评论