react
天下1281
这个作者很懒,什么都没留下…
展开
-
常用的React生命周期函数
生命周期的三个阶段Mounting 加载阶段Update 更新阶段UnMounting 卸载阶段常用的React生命周期函数componentWillMount 第一次渲染之前componentDidMount 第一次渲染之后componentWillReceiveProps(nextProps){} 在组件接受新的props调用componentWillReceive...原创 2019-08-26 23:44:04 · 806 阅读 · 0 评论 -
2019年7月30日 星期二 今日计划
2019年7月30日 星期二 今日计划上下文(Context)原创 2019-07-30 19:51:04 · 113 阅读 · 0 评论 -
mac下安装react开发工具 — React Devtools
mac下安装react开发工具 — React Devtools一、下载官网地址:https://github.com/facebook/react-devtools下载react-devtools-master文件夹到本地二、npm安装依赖进入到react-devtools-master文件夹,用npm安装依赖。npm --registry https://registry.npm....原创 2019-08-03 02:35:02 · 2009 阅读 · 0 评论 -
高阶组件
高阶组件原创 2019-08-02 21:25:10 · 690 阅读 · 0 评论 -
Accessibility(可访问性)
可访问性原创 2019-07-23 16:15:15 · 582 阅读 · 0 评论 -
contains方法
contains() 实现点击界面空白部分关闭当前面板的效果contains 判断某个元素是不是选定元素的子元素或者本身。window.event.target 返回事件的目标节点,比如点击了某个<div></div>就会返回div。addEventListener 事件监听 window.addEventListener('click',function(){}...原创 2019-03-31 18:38:40 · 6300 阅读 · 0 评论 -
状态提升
10.状态提升(Lifting State Up)import React,{ Component } from 'react';function Bilo(props) { if(props.value >= 100){ return <h1>水开了</h1> } return <div>水还没有开</...原创 2019-03-10 18:04:04 · 660 阅读 · 0 评论 -
当有多个Input框时如何批量管理数据
用到的技术就是ES6中的计算的属性名称代码如下:import React,{ Component } from 'react';class Forms extends Component { constructor(props) { super(props); this.state = { value: '', ...原创 2019-03-10 14:37:51 · 588 阅读 · 0 评论 -
React如何父子传值
众所周知,React父组件给子组件传值通过属性。父组件 &lt;div&gt; &lt;Input father='父组件传下来的值' /&gt;&lt;/div&gt;子组件Input&lt;div&gt; { this.props.father }&lt;/div&gt;那么子组件给父组件传值该如何传呢?一句话可原创 2019-03-09 10:19:32 · 341 阅读 · 0 评论 -
React 处理事件
不理解的地方:当使用react时,你一般不需要调用addEventListener在DOM元素被创建之后添加事件监听器。相反,只要当元素被初始渲染的时候提供一个监听器就可以了。...原创 2018-08-13 21:23:29 · 143 阅读 · 0 评论 -
上下文(Context)
上下文(Context)原创 2019-07-30 19:53:06 · 513 阅读 · 0 评论 -
早安,想要什么,就需要做什么样的努力
早安,想要什么,就需要做什么样的努力。别人能做到的你也可以做到,你觉得难的别人也是如此。唯有努力才可以破局。只有时间上的差距,没有学不会的知识。...原创 2019-08-03 10:47:19 · 220 阅读 · 0 评论 -
转发Refs
转发Refs原创 2019-08-02 14:18:44 · 190 阅读 · 0 评论 -
2019年8月2 星期五 今日计划
2019年8月2 星期五 今日计划转发Refs片段(Fragments)高阶组件(Higher-Order Components)原创 2019-08-02 12:24:55 · 128 阅读 · 0 评论 -
错误边界(Error Boundaries)
错误边界(Error Boundaries)import React,{Component} from 'react';class ErrorBoundary extends Component{ constructor(props){ super(props); this.state = { } } componen...原创 2019-08-02 02:11:38 · 617 阅读 · 0 评论 -
2019年8月2日 星期五 今日计划
209年8月2日 星期五 今日计划错误边界(ErrorBoundaries)原创 2019-08-02 00:48:29 · 97 阅读 · 0 评论 -
refs转发
refs原创 2019-08-06 01:57:44 · 202 阅读 · 0 评论 -
2019年8月8日 星期四 今日计划
2019年8月8日 星期四 今日计划于第三方库协同深入JSX原创 2019-08-08 11:02:21 · 215 阅读 · 0 评论 -
2019年7月23日 星期二 今日计划
2019年7月23日 星期二 今日计划可访问性代码拆分上下文错误边界转发refs片段高阶组件原创 2019-07-23 15:27:34 · 119 阅读 · 0 评论 -
2019年8月5日星期一 今日计划
2019年8月5日星期一 今日计划转发Refs高阶组件原创 2019-08-05 00:09:23 · 167 阅读 · 0 评论 -
React.createElement和React. cloneElement
React.createElement和React. cloneElement原创 2019-08-04 23:41:20 · 1341 阅读 · 0 评论 -
代码拆分
代码拆分原创 2019-07-26 17:25:47 · 356 阅读 · 0 评论 -
2019年8月31日 星期三 今日计划
2019年8月31日 星期三 今日计划上下文(Context)错误边界原创 2019-07-31 15:55:46 · 148 阅读 · 0 评论 -
Uncaught Error: NumberList(...): Nothing was returned from render. This usually means a return state
import React,{ Component } from 'react';function NumberList (props) { // console.log('props',props);}class Keys extends Component { render() { const numbers = [2,4,6,8]; ...原创 2018-08-15 11:05:01 · 11971 阅读 · 3 评论 -
for in遍历(学习笔记)
for in 既可以遍历数组又可以遍历对象typeShowClickEvent(index){ let typeName= this.state.typeNameList[index]; let obj = {}; if( typeName == "类型") { }else { obj.workOrderTypeString = typeName;原创 2017-10-29 15:47:47 · 999 阅读 · 0 评论 -
登录(学习笔记)
//这是一个组件<div className="login_btn center"> <Button style={{width:'100%',height:'42px',backgroundColor: '#fff',color: '#03030'}} title="登录" onClick={this.loginEvent.bind(this)}/></div><div原创 2017-10-11 13:11:19 · 738 阅读 · 0 评论 -
filter方法和find方法
数组有一些列的方法,比如:map()find()filter()every()forEach()今天我们只看filter方法和find() cityShowClickEvent(index) { //console.log('点击城市的每一项'); //获取城市码 let cityCode = this.state.cityList[index原创 2017-10-20 01:20:38 · 490 阅读 · 0 评论 -
文本截取
在进入话题之前,我们先说一个场景。 类似于微博140字的限制和美团外卖app点餐备注只限50字。像这种需求我们该如何实现。 分析需求: 1.既然有字数限制,我们在textarea框中输入的字数超出这个最大的字数时,我们该如何处理。 简而言之就是超出的字数,我们要截取掉。 并且要提示输入了多少字。<textarea onChange={(e)=>this.changeEvent(e)}>原创 2017-10-17 21:33:35 · 467 阅读 · 0 评论 -
react-app
在写代码之前,我们先写一个路由模板。 首先要引入路由import { BrowserRouter as Router, Route, NavLink} from 'react-router-dom';其次,写一个路由模板<Router> <div> <Route exact path="/" component={Wechat}/>原创 2017-08-12 17:42:27 · 507 阅读 · 0 评论 -
react基础
简介 在目前看来react毫无疑问是最流行的框架,没有之一。 之前看了阮一峰写的react基础,写的非常好。但这个教程在现在看来,有些用法已经过时了。 所以我打算用ES6语法写一篇这样的文章。 说到ES6,大家都知道目前还不能兼容所有浏览器,因此我们要用到babel。把ES6代码转化为浏览器识别的ES5代码。 在这里我用webpack搭建的环境,没用过webpack的,可以看我之前写的文章原创 2017-08-07 11:54:18 · 354 阅读 · 0 评论 -
react学习(ES5和ES6两种写法的对比)
前言学习react有一段时间了,第一遍学习的时候,学的云里来雾里去,只懂了一些皮毛,因为react技术栈包括的内容挺多的,主要包括react、react-router、redux,还有一些辅助工具,比如webpack、ES6、git这些都要学,可以说是必学的。不然很难阅读别人写的什么。我当时这些都不会,公司让我熟悉项目我就sb了。后面我一个模块一个模块的学习。到目前基础的基本都掌握了。 下面我们来原创 2017-06-30 21:32:55 · 1186 阅读 · 0 评论 -
react-组件的生命周期
组件的生命周期分为三个状态:Mounting:已插入真实的DOMUpdating: 正在被重新渲染Unmounting : 已移除真实的DOMReact为每个状态都提供了两种处理函数,will在进入状态之前调用,did在函数进入状态之后调用,三种状态供给五种处理函数。componentWillMountcomponentDidMountcomponentWillUpdate( obje原创 2017-06-30 18:41:04 · 301 阅读 · 0 评论 -
react-表单
用户在表单中填写的内容,属于用户和组件的交互,所以不能用this.props读取。 ES5的写法:var Input = React.createClass({ getInitialState: function() { return {value: 'Hello!'}; }, handleChange: function(event) { this.setState(原创 2017-06-30 17:25:25 · 238 阅读 · 0 评论 -
React
1.ReactDOM.render()是react的最基本方法,用于将模板转化为HTML语言,并插入指定的DOM节点。render( <h1>hello world!</h1>, document.getElementById('root'))运行结果如下: 2.JSX语法 上面的代码中,HTML标签直接写在javascript语言中,不加任何引号,这就是JSX的语法,它允许H原创 2017-05-29 21:39:37 · 2420 阅读 · 0 评论 -
JSX语法
提到JSX,我们肯定想知道什么是JSX,有什么特点? JSX就是javascript和XML结合的一种格式,React发明了JSX,利用HTML语法来创建虚拟DOM, 当遇到<,JSX就当做html解析,遇到{,就当做javascript解析。JSX的优点JSX执行更快,因为它在编译javascript后进行了优化。类型是安全的的使用JSX编写模板更加简单快速。使用JSX JSX看起来类原创 2017-05-29 18:47:02 · 1010 阅读 · 0 评论 -
记录代码
//派发确认弹出框的确认按钮 //点击确认弹出框中的确认按钮时,调用接口 confirmEvent() { let adminId = parseInt(localStorage.getItem('id')); console.log('adminId',adminId); let param ={ distri原创 2017-10-21 18:53:44 · 455 阅读 · 0 评论 -
字符串截取(做项目时的总结-待完善)
//确定时,处理隐藏弹出框,城市显示处理后的内容cityChangeEvent(text) { let textSplit = text.split(' '); let textCity = textSplit[1]; console.log(textSplit); this.setState({ city_show: false,原创 2017-10-16 16:22:20 · 231 阅读 · 0 评论 -
键(Keys)
如果列表的顺序可能改变,我们不建议使用索引作为Keys,这可能会对性能产生负面影响,并可能导致组件状态问题。原创 2018-08-15 11:53:23 · 481 阅读 · 0 评论 -
React 学习JSX
JSX介绍 考虑一下这个变量的声明:const element = <h1>Hello,World!</h1>;这种既不是字符串也不是HTML。而是JSX。它是javaScript的一种扩展语法。我们推荐在React种使用这种语法来描述UI信息。 为什么选择JSX React拥抱渲染逻辑与其他UI逻辑固有耦合的事实:事件如何处理,状态如何随着事件变化以及数...原创 2018-08-06 12:08:36 · 151 阅读 · 0 评论 -
React学习Hello World!
天才就是无止境刻苦勤奋的能力--卡莱尔Hello World! 最简单的React例子,像下面这样:ReactDOM.render( &amp;amp;lt;h1&amp;amp;gt;Hello,World!&amp;amp;lt;/h1&amp;amp;gt;, //这里也可以是一个组件,后面会讲到。比如&amp;amp;lt;Hello /&amp;amp;gt; do原创 2018-08-04 12:57:44 · 245 阅读 · 0 评论