![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
閉丄眼聆厛倖輻
这个作者很懒,什么都没留下…
展开
-
React中队prop进行类型限制
在类型传递中,我们要对prop中的类型进行限制最新版本有一个PropTypes进行处理安装:npm i prop-types引入:import PropTypes from 'prop-types'使用:Person.propTypes = { //你类的属性规则 ,, static相当于直接给类本身添加了属性 name: PropTypes.string.isRequired, sex: PropTypes.str原创 2021-11-26 14:57:17 · 471 阅读 · 0 评论 -
react安裝使用,父子兄弟传值,三种路由传参详解,组件的生命周期
一:使用安装二:父子间传值:原创 2021-09-16 17:17:57 · 283 阅读 · 0 评论 -
react中redux的使用
这是reduce的完整模板(1).去除Count组件自身的状态(2).src下建立: -redux-store.js-count_reducer.jsstore.js(3).store.js:1).引入redux中的createStore函数,创建一个store2).createStore调用时要传入一个为其服务的reducer3)....原创 2021-09-07 10:14:58 · 53 阅读 · 0 评论 -
react中的withRouter
//withRouter可以加工一般组件,让一般组件具备路由组件所特有的API//withRouter的返回值是一个新组件import{withRouter}from'react-router-dom'exportdefaultwithRouter(Header)import React, { Component } from 'react'import {withRouter} from 'react-router-dom'class Header extends C...原创 2021-09-06 19:44:44 · 73 阅读 · 0 评论 -
react中的ui组件antd使用
antd的按需引入+自定主题1.安装依赖:yarn add react-app-rewired customize-cra babel-plugin-import less less-loader2.修改package.json.... "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test",原创 2021-09-06 19:41:28 · 99 阅读 · 0 评论 -
react中的push和replace跳转
<button onClick={()=> this.pushShow(msgObj.id,msgObj.title)}>push查看</button><button onClick={()=> this.replaceShow(msgObj.id,msgObj.title)}>replace查看</button>push路由跳转是可以跳转到上一级,可以返回的 pushShow = (id,title)=>{ //pu..原创 2021-09-02 20:01:43 · 787 阅读 · 0 评论 -
react组件间通信(pubsub)
安装: npm install pubsub-js --save使用:首先是引入:importPubSubfrom'pubsub-js',触发事件发送数据import React, { Component } from 'react'import PubSub from 'pubsub-js'export default class Search extends Component { search = ()=>{ PubSub.publish('atguigu',{...原创 2021-08-30 15:37:46 · 255 阅读 · 0 评论 -
react中的代理-proxy
2D转换平移这是移动x,y轴,平移transform: translate(x,y);可以分开写:.box{transform:translateX();transform:translateY();}旋转:旋转45度,顺时针为正.box{transform: rotate(45deg);}缩放:缩放宽高.box{transform: scale(x,y);}缩放倍数.box{transform: scale(1.1);}动画首原创 2021-08-28 14:26:41 · 120 阅读 · 0 评论 -
react的父子数据传递
父传子:父组件创建数据传递: //初始化状态 state = { todos: [ { id: '001', name: '吃饭', done: true }, { id: '002', name: '睡觉', done: true }, { id: '003', name: '打代码', done: false }, { id: '004', name: '逛街', done: false } ] } render() { const { todos }原创 2021-08-26 19:00:23 · 60 阅读 · 0 评论 -
常用的react生命周期:
react的生命周期:初始化加载的时候:由ReactDOM.render()触发---初次渲染1.constructor()2.getDerivedStateFromProps3.render()4.componentDidMount()=====>常用一般在这个钩子中做一些初始化的事,例如:开启定时 器、发送网络请求、订阅消息...原创 2021-08-24 19:25:40 · 51 阅读 · 0 评论 -
react中的事件处理
React 事件的命名采用小驼峰式(camelCase),而不是纯小写。<button onClick={activateLasers}> Activate Lasers</button>必须显式的使用preventDefaultfunction ActionLink() { function handleClick(e) { e.preventDefault(); console.log('The link was clicked.');.原创 2021-08-19 19:14:57 · 49 阅读 · 0 评论 -
react学习小结:state,props,refs三大核心属性
state:要使用class中的构造函数:constructor //构造器调用几次? ———— 1次 constructor(props){ super(props) }事件处理使用changeWeather,改变数据需要用this.setState() //changeWeather调用几次? ———— 点几次调几次 changeWeather(){ //changeWeather放在哪里? ———— Weather的原型对象上,供实例使用原创 2021-08-19 18:56:50 · 52 阅读 · 0 评论 -
学习react---小结
react的特点:1. 声明式编码2. 组件化编码3. React Native 编写原生应用4. 高效(优秀的Diffing算法)原因:1.使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。2.DOM Diffing算法, 最小化页面重绘。react的js库:1. react.js:React核心库。2. react-dom.js:提供操作DOM的react扩展库。3. babel.min.js:解析JSX语法代码转为JS代码的库。react渲原创 2021-08-16 20:21:21 · 78 阅读 · 0 评论