React
react框架用法
QQ帝国
积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得,圣心备焉。故不积跬步,无以至千里;不积小流,无以成江海。骐骥一跃,不能十步;驽马十驾,功在不舍。锲而舍之,朽木不折;锲而不舍,金石可镂。蚓无爪牙之利,筋骨之强,上食埃土,下饮黄泉,用心一也。蟹六跪而二螯,非蛇鳝之穴无可寄托者,用心躁也。
展开
-
react 18 Hooks扩展函数式组件的状态管理
(注:副作用的来源:配置文件、用户的输入、数据库等等,所有的外部交互都有可能产生副作用,副作用会给程序带来安全隐患和不确定性,要尽可能的控制副作用在可控制的范围内发生。以下是一个使用Hooks扩展函数式组件的示例。原创 2023-12-22 14:37:34 · 912 阅读 · 0 评论 -
react v-18父组件调用子组件的方法和数据
react v-18父组件调用子组件的方法和数据 子组件 (通过useImperativeHandle() 抛出)原创 2023-12-21 16:46:46 · 2254 阅读 · 0 评论 -
react v-18 子传父
【代码】react v-18 子传父。原创 2023-12-21 16:48:33 · 843 阅读 · 0 评论 -
react v-18 父传子数据和方法
【代码】react v-18 父传子数据和方法。原创 2023-12-21 16:49:53 · 1088 阅读 · 0 评论 -
react项目打包并在本地运行
react项目的打包在该项目文件夹中打开终端输入项目打包命令:npm run build打包成功后文件夹中会多出一个 build 文件,该文件就是打包好的项目!二、react项目打包后的启动方法:1、首先我们全局安装live-server插件live-server插件可以简单创建一个本地服务,执行以下命令全局安装live-server插件npm install -g live-server安装完成就可以在终端启动打包好的build项目了2、在build文件夹终端输原创 2022-03-10 13:47:54 · 3927 阅读 · 0 评论 -
Vue、React同一个dom元素如何绑定多个点击事件?
Vue:<button type="button" @click="a();b()">vue按钮</button>React:<button type="button" onClick={function(event){ a(); b()}}>react按钮</button>听说现在比较流行ES6?React:&原创 2018-10-17 11:31:30 · 2455 阅读 · 1 评论 -
react常见面试题
1、redux中间件中间件提供第三方插件的模式,自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer 。这种机制可以让我们改变数据流,实现如异步 action ,action 过滤,日志输出,异常报告等功能。常见的中间件:redux-logger:提供日志输出redux-thunk:处理异步操作...原创 2018-09-26 21:34:15 · 6431 阅读 · 0 评论 -
react插件篇
在react中进行数据请求: fetch:检验浏览器是否支持:if(self.fetch) { // run my fetch request here} else { // do something with XMLHttpRequest?}发起请求: fetch('flowers.jpg').then(function(response) {...原创 2018-09-17 21:28:08 · 1096 阅读 · 0 评论 -
react生命周期
1:construct 类似 Vue 中的 beforeCreated 和 Created;操作:(1)当前组件的检测; 2:componentWillMount 介绍:类似Vue 中 beforemount ;在render函数调用之前进行调 用;: 3:render 纯函数 ; 操作 (1)不能调用setstate进行数据的改变,否则会陷入死循环...原创 2018-09-17 21:40:55 · 207 阅读 · 0 评论 -
redux与flux
flux 简介:2013和react一同诞生,flux和react的出现,代替了老一辈的backbone.js和ember.js等mvc框架,但是flux并不是mvc框架,并推翻了传统的mvc;之前的前端mvc和服务端的mvc有一定的区别,并不是每次的页面改变都经历一次闭环的,而是出现了很多的v和m直接交互的场景,这样就造成了数据的比较难维护;而flux的出现让前端的应用更像服务端mv...原创 2018-09-17 21:43:12 · 1409 阅读 · 0 评论 -
react子组件传父
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-07-31 20:40:28 · 234 阅读 · 0 评论 -
react父组件传子组件(数据传递)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-07-31 20:42:03 · 495 阅读 · 0 评论 -
React生命周期详解
React严格定义了组件的生命周期会经历如下三个过程:装载过程(Mount),组件第一次在DOM树渲染的过程。 更新过程(Update),当组件被重新渲染的过程。 卸载过程(Unmount),组件重DOM树中删除的过程。执行这3个过程的调用函数就是声明周期函数。装载过程该过程会依次调用如下函数:constructor():ES6类的构造函数(为了初始化state或绑定this...转载 2018-09-04 21:48:40 · 300 阅读 · 0 评论 -
react-todolist
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-07-31 22:32:24 · 176 阅读 · 0 评论 -
react-todolist2
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-07-31 22:32:59 · 242 阅读 · 0 评论 -
react路由配置15版与16版区别
1、安装依赖 不需要指定版本,默认最新 npm i react-router react-router-dom --save-dev 2、引入主要组件对象 import {BrowserRouter as Router,Route,Link,Redirect} from 'react-router-dom';3、书写结构在组件内部,不需要写在render中,Router组...原创 2018-08-01 22:05:20 · 1904 阅读 · 1 评论 -
15版react脚手架使用
//Appimport React, { Component } from 'react';import './App.css';import {Link} from "react-router"class App extends Component { render() { return ( <div className="App"> ...原创 2018-08-01 22:44:45 · 279 阅读 · 0 评论 -
React使用总结
做React需要会什么?react的功能其实很单一,主要负责渲染的功能,现有的框架,比如angular是一个大而全的框架,用了angular几乎就不需要用其他工具辅助配合,但是react不一样,他只负责ui渲染,想要做好一个项目,往往需要其他库和工具的配合,比如用redux来管理数据,react-router管理路由,react已经全面拥抱es6,所以es6也得掌握,webpack就算是不会配...翻译 2018-08-01 22:49:06 · 166 阅读 · 0 评论 -
flux状态管理器
//view.jsimport React from "react"import $ from "jquery"class View extends React.Component{ constructor(props){ super(props) } tap(){ this.props.name(this.r...原创 2018-08-02 17:51:57 · 516 阅读 · 0 评论 -
react脚手架搭建命令
使用npm下载create-react-app运行如下命令:npm install -g create-react-app 国内npm一般下载比较慢或者是常出现下载失败的情况,我们可以指定下载的仓库:npm install -g create-react-app --registry https://registry.npm.taobao.org 或者直接设置npm的默认仓...原创 2018-08-04 21:18:33 · 1669 阅读 · 0 评论 -
react中constructor( )和super( )的具体含义以及如何使用
1.constructor( )-----super( )的基本含义 constructor( )——构造方法 这是ES6对类的默认方法,通过 new 命令生成对象实例时自动调用该方法。并且,该方法是类中必须有的,如果没有显示定义,则会默认添加空的constructor( )方法。 super( ) ——继承 在class方法中,继承是使用 ex...翻译 2018-08-05 12:44:32 · 416 阅读 · 0 评论 -
react PPT
1 . XML 基本语法1 . XML 基本语法定义标签时,只允许被一个标签包裹。标签一定要闭合。2 . 元素类型小写首字母对应 DOM 元素大写首字母对应组件元素自然3、react中如何去写css 1、基于class --(className) 2、基于inner css (facebook 主张的方式) 行间样式(json) 3、原型...原创 2018-08-31 20:43:40 · 1306 阅读 · 0 评论 -
react基本用法class、事件
1 . XML 基本语法 定义标签时,只允许被一个标签包裹。标签一定要闭合。 2 . 元素类型 小写首字母对应 DOM 元素大写首字母对应组件元素自然 3、react中如何去写css 1、基于class --(className) 2、基于inner css (facebook 主张的方式) 行间样式(json) 3、原型链和全局变量 ...原创 2018-08-31 20:45:13 · 3691 阅读 · 0 评论 -
react属性传值 key:value形式
key:value传值步骤:1、通过<Demo obj={obj} arr={arr} name="hello" str="hi"/><Demo obj={obj} arr={arr} name="hello" str="hi"/>2、通过{this.props.name}接收 <!DOCTYPE html>&am原创 2018-08-31 21:41:41 · 1780 阅读 · 0 评论 -
react展开式传值,三个点
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="../lib/react.min.js" type="text/javascript" chars原创 2018-08-31 21:55:14 · 2461 阅读 · 0 评论 -
react获取私有属性(低版本)
1、通过 this.state可获取内部声明getDefaultProps(){ }的属性,此钩子函数在react低版本里才有 var Demo=React.createClass({ 属性(不可修改数据) getDefaultProps(){ return{ str:'hello', arr:[1,23,3], obj:{ name:'小明...原创 2018-08-31 22:11:11 · 920 阅读 · 0 评论 -
react中使用es6获取属性值
高版本写法一: 通过defaultProps声明一个str,如下Demo.defaultProps={ str:'hello'} 然后通过this.props获取值 ------------------------------------------------------------------------------------------------...原创 2018-08-31 22:20:23 · 1521 阅读 · 0 评论 -
react+webpack手动搭建项目(低版+ES5)
1、新建文件夹pro2、npm init 一路回车 生成package.json3、安装webpack, 4.0以上版本安装命令:npm i webpack webpack-cli webpack-dev-server -D4、配置文件,component、css、icon、img、index.html、main.js、webpack.config.js5、安装r...原创 2018-09-03 21:52:25 · 421 阅读 · 0 评论 -
react+webpack手动搭建项目(高版+ES6写法)
1、新建文件夹pro2、npm init 一路回车 生成package.json3、安装webpack, 4.0以上版本安装命令:npm i webpack webpack-cli webpack-dev-server -D4、配置文件,组件component、css、icon、img、index.html、入口文件main.js、webpack.config.js...原创 2018-09-03 22:59:29 · 235 阅读 · 0 评论 -
react改变input属性,text变password
class Demo extends React.Component{ constructor(props){ super(props) this.state={ str:'text', text:'明文' } } tap(){ if(this.state.str=='text'){ this.setState({str:'password',text...原创 2018-09-04 13:04:33 · 2286 阅读 · 0 评论 -
react传值,父传子
原理:1、在input添加属性ref="ipt",如下 2、constructor里面添加状态strconstructor(props){ super(props) this.state={ str:'' } }3、点击时获取input值,然后通过设置状态,把值添加给strtap(){ this.setState({str:this.refs.i...原创 2018-09-04 17:41:47 · 282 阅读 · 0 评论 -
react传值,子传父
步骤:1、添加事件tap,获取子组件input值<input type="text" ref="ipt" /><button onClick={this.tap.bind(this)}>发送给fu组件</button>2、通过this.refs.ipt.value接收input值然后 通过 this.props.name(this.re...原创 2018-09-04 18:00:38 · 266 阅读 · 0 评论 -
react制作todolist,方法一
步骤 1、点击获取input值,把获取到的值放到一个数组里constructor(props){ super(props) this.state={ str:'', arr:[] } }//点击事件,添加数组 tap(){ let arr1=this.state.arr; arr1.push(this.refs.ipt.value) thi...原创 2018-09-04 19:50:14 · 449 阅读 · 1 评论 -
react制作todolist,方法二(jsx语法)
和方法一唯一的区别就是遍历的方式用jsx语法遍历,如下:render(){ var jsx=[];//jsx数组模版 var _this=this; this.state.arr.map(function(item,i){ jsx.push(<div>{i}--{item}<button onClick={_this.del.bind(_thi...原创 2018-09-04 19:55:00 · 258 阅读 · 0 评论 -
React 的 diff 算法
React 是 Facebook 开发的构建用户界面的类库.它从设计之初就将性能作为重点.这篇文章我展示 diff 算法和渲染过程怎样工作, 你可以借鉴优化自己的应用.Diff 算法在深入实现的细节之前, 需要了解一下 React 怎样工作的.var MyComponent = React.createClass({ render: function() { if (...翻译 2018-09-04 20:46:55 · 120 阅读 · 0 评论 -
数据绑定的第一种方式:基于jsx绑定
componentWillMount 和 componentDidMount 都可以获取数据1、在componentWillMount/componentDidMount 中获取ajax数据 ( 面试题) 2、将得到的数据存入state中 3、在render中直接将state中的数据循环遍历 放在一个jsx的数据模板中 4、循环叠加这个jsx模板 通过{}嵌入到页面中...原创 2018-09-04 21:56:39 · 612 阅读 · 0 评论 -
react+ 动画
react常用的ui框架 蚂蚁 css3动画 关键帧动画 animation @keyframes 过渡动画 transitionjavascript动画 各种库的动画方法,例如:JQ的animate方法ReactTransition:React官方提供的动画解决方案。官方文档:https://facebook.github.io/react/docs/...原创 2018-09-04 22:37:30 · 275 阅读 · 0 评论 -
react+jsx放入数组可自动遍历
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>菜鸟教程 React 实例</title> <script src="https://cdn.bootcss.com/react/16.4.0/u原创 2018-09-04 22:50:29 · 766 阅读 · 0 评论 -
react+动画的使用方法
css3动画 关键帧动画 animation @keyframes 过渡动画 transitionjavascript动画 各种库的动画方法,例如:JQ的animate方法ReactTransition:React官方提供的动画解决方案。官方文档:https://facebook.github.io/react/docs/animation.htmlReac...原创 2018-09-05 09:20:06 · 755 阅读 · 0 评论 -
react路由创建+配置+原理
1、命令安装:create-react-app+项目名2、安装:低版本依赖安装:npm i react@15.6 react-dom@15.6 react-router@2.8 --save-dev高版本依赖安装:npm i react-router react-router-dom --save-dev安装jq命令:npm i jquery -D3、配置文件...原创 2018-09-05 17:59:13 · 1067 阅读 · 0 评论