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 · 464 阅读 · 0 评论 -
react安裝使用,父子兄弟传值,三种路由传参详解,组件的生命周期
一:使用安装 二:父子间传值:原创 2021-09-16 17:17:57 · 276 阅读 · 0 评论 -
react中redux的使用
这是reduce的完整模板 (1).去除Count组件自身的状态 (2).src下建立: -redux -store.js -count_reducer.js store.js (3).store.js: 1).引入redux中的createStore函数,创建一个store 2).createStore调用时要传入一个为其服务的reducer 3)....原创 2021-09-07 10:14:58 · 50 阅读 · 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 · 72 阅读 · 0 评论 -
react中的ui组件antd使用
antd的按需引入+自定主题 1.安装依赖:yarn add react-app-rewired customize-cra babel-plugin-import less less-loader 2.修改package.json .... "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test",原创 2021-09-06 19:41:28 · 95 阅读 · 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 · 773 阅读 · 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 · 252 阅读 · 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 · 116 阅读 · 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 · 59 阅读 · 0 评论 -
常用的react生命周期:
react的生命周期: 初始化加载的时候: 由ReactDOM.render()触发---初次渲染 1.constructor() 2.getDerivedStateFromProps 3.render() 4.componentDidMount()=====>常用一般在这个钩子中做一些初始化的事,例如:开启定时 器、发送网络请求、订阅消息 ...原创 2021-08-24 19:25:40 · 49 阅读 · 0 评论 -
react中的事件处理
React 事件的命名采用小驼峰式(camelCase),而不是纯小写。 <button onClick={activateLasers}> Activate Lasers </button> 必须显式的使用preventDefault function ActionLink() { function handleClick(e) { e.preventDefault(); console.log('The link was clicked.');.原创 2021-08-19 19:14:57 · 47 阅读 · 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 · 49 阅读 · 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 · 74 阅读 · 0 评论