react
MeiLuan_yahoho
这个作者很懒,什么都没留下…
展开
-
【前端面试准备】Vue和React的相同点和不同点
React 和 Vue 的相同点**1.使用Virtual DOM用JS模拟DOM结构,DOM变化的对比,放在JS层做,以提高重绘性能DOM操作昂贵,JS运行效率高,要减少DOM操作进一步了解为什么使用虚拟dom:可查看链接https://www.cnblogs.com/ziyoublog/p/9989797.html2. 提供了响应式(Reactive)和组件化(Composab...原创 2019-02-25 12:16:48 · 1501 阅读 · 0 评论 -
react简书项目学习笔记8props,state,render函数之间的关系
1.当组件的state或Props改变时render函数重新执行2.当父组件的render函数被运行时它的子组件的render函数都将被重新运行因为子组件是父组件的一部分原创 2019-01-29 18:11:19 · 305 阅读 · 0 评论 -
react简书项目学习笔记7propTypes和defaulProps的应用
1.使用propTypes校验父组件传过来的值的类型是否正确import PropTypes from 'prop-types';// 注意外层的这个propTypes首字母要小写TodoItem.propTypes = { content: PropTypes.string, deleteItem: PropTypes.func, index: PropTypes.number...原创 2019-01-29 17:13:13 · 243 阅读 · 0 评论 -
react简书项目学习笔记38如何拿到页面的输入值
通过ref属性把输入值存起来,然后在函数中传参 //存值 <Input placeholder='密码' type='password' ref={(input) => { this.password = input }}> </Input> //传参 <Button placeholder='登陆' onClick={() => this....原创 2019-02-15 12:39:26 · 265 阅读 · 0 评论 -
react简书项目学习笔记6围绕react衍生的思考
1.react是一种声明式的开发声明式编程是一种编程范式,与命令式编程相对立。它描述目标的性质,让计算机明白目标,而非流程。声明式编程不用告诉计算机问题领域,从而避免随之而来的副作用。而命令式编程则需要用算法来明确的指出每一步该怎么做。2.react可以与其他框架并存在index.html文件中,react只管理id="root"里的代码的渲染,其他框架可以操作其他部分的代码3.组件化p...原创 2019-01-29 16:24:10 · 403 阅读 · 0 评论 -
react简书项目学习笔记5代码优化
1.绑定this指向写法将函数this指向的绑定全部写在constructor中,这样在后序代码调用时就无需再绑定,写法也规范一些2.将render里面用函数return出的比较冗长的代码抽出来做独立函数,再在render里直接调用函数如上图在ul里循环输出li,把循环的函数抽出来,再在代码里调用方法3.setState的新写法旧版的setState()直接用对象的形式传值,但是新版...原创 2019-01-29 16:04:50 · 194 阅读 · 0 评论 -
※react简书项目学习笔记4父子组件通信
一.父组件向子组件传值1.父组件向子组件传递内容,通过属性的形式传递eg.父组件todoList通过属性content向子组件todoItem传值2.子组件通过Props接收父组件传递的值二.子组件向父组件传值子组件不能直接改变父组件的值,要改变父之间的值,必须调用子组件的方法,要把子组件的方法作为属性传给子组件。注意子组件调用父组件的方法时,对传过来的方法要绑定this的指向...原创 2019-01-29 15:05:46 · 173 阅读 · 0 评论 -
**react简书项目学习笔记26使用react-redux
1.npm install react-redux --save2.使用Provider组件//在Provider组件中的组件都有能力去连接storeimport { Provider } from 'react-redux';const App = ( &amp;lt;Provider store={store}&amp;gt; &amp;lt;TodoList /&amp;gt; &amp;lt;/P原创 2019-02-05 22:25:20 · 225 阅读 · 0 评论 -
react简书项目学习笔记25redux-saga中间件
1.npm install redux-saga2.store/index的配置引入createSagaMiddleware,创建SagaMiddleware通过applyMiddleware使用中间件创建sagas.js文件引入sagas.Js文件sagas.Js文件的书写通过sagamiddleware运行sagas.js文件import createSagaMiddlewar...原创 2019-02-05 20:28:17 · 303 阅读 · 0 评论 -
性能优化页面所有js不要在加载首页时一起加载的解决办法
使用react-loadable例如想要在加载首页时不要加载详情页的js,办法:在detail文件夹下新建loadable.js文件import React from 'react';import Loadable from 'react-loadable';const LoadableComponent = Loadable({ // 此处含义是要加载的是当前目录下的inde...原创 2019-02-15 19:54:39 · 682 阅读 · 0 评论 -
react简书项目学习笔记39项目上线流程
1.打开xampp2.启动apache服务3.后端的json文件放在api目录下,api目录放在xampp/htdocs下这样之后通过路由http://localhost:8080/api/json名就可以访问到对应的文件4.前端代码文件删除public目录下的api文件夹运行命令npm run build把生成的build文件夹里的文件全部粘贴到htdocs目录下这样就相...原创 2019-02-15 20:25:41 · 276 阅读 · 0 评论 -
React设置非全局样式关于styled-compoents组件的使用
如果引入的是css文件,只要在一个文件中被引入,则全局都会生效import ‘./index.css’;使用stled-components可以使得样式只对我们自己想要的组件生效而不是全局生效参考文章https://blog.csdn.net/qq_32063079/article/details/83277054...原创 2019-02-10 00:19:32 · 814 阅读 · 0 评论 -
react简书项目学习笔记34首页组件的拆分
src目录下新建pages文件夹,pages文件夹下新建相关组件文件夹(不同页面对应不同文件夹)2.同一个页面下,还要适当地把不同的板块拆成不同的组件原创 2019-02-14 00:06:59 · 318 阅读 · 0 评论 -
react简书项目学习笔记33react中实现路由功能
1.npm install react-router-dom2.在APP.js下加一个exact去请准匹配import { BrowserRouter,Route } from 'react-router-dom'; return ( <Fragment> <Provider store={store}> <di...原创 2019-02-13 20:47:03 · 237 阅读 · 0 评论 -
react简书项目学习笔记32在组件中调用action传参
react中调用action传参时要通过函数的形式例子如下: &amp;lt;div onClick={() =&amp;gt; { handleChangePage(page, totalPage) }}&amp;gt;换一批&amp;lt;/div&amp;gt;注意不能直接写onclick=handleChangePage(page, totalPage),要写在新函数中onClick={() =&am原创 2019-02-13 15:00:30 · 999 阅读 · 0 评论 -
react简书项目学习笔记30使用redux-immutabe统一数据格式
1.npm install redux-immutable --save2.把src/store/index中import { combineReducers } from 'redux';替换成 import { combineReducers } from 'redux-immutable';3.这样后项目文件调用数据格式可写成 const mapStateToProps ...原创 2019-02-13 14:51:05 · 233 阅读 · 0 评论 -
react简书项目学习笔记31模拟数据渲染,在项目中使用redux-thunk请求ajax数据
1.使用了create-react-app创建的项目,可以在项目的Public文件夹下新建api文件夹2.在api中放json文件,把假数据放在json文件即可3.在上线前把api目录删除掉即可使用redux-thunk1.把异步逻辑要拆分到action-creators去,就要就action-creators返回的不仅是一个对象而是一个函数,这就要求我们使用redux-thunk2.获...原创 2019-02-13 13:41:50 · 231 阅读 · 0 评论 -
react简书项目学习笔记29使用immutble对象使得state不被直接更改
如果reducer中的state对象被我们不小心直接修改就会报错,而且错误比较难以排除,解决办法:可以使用immutable对象(immutable对象不可以被直接修改)github地址 https://github.com/facebook/immutable-jsimport * as constants from './constants';import { fromJS } fr...原创 2019-02-12 23:15:56 · 222 阅读 · 0 评论 -
react简书项目学习笔记28redux拆分redcer,action便于管理
1.当把所有数据以及对数据的操作都放在同一个文件中时,这个文件必须会变得非常大,这样的话设计就显得不够合理。(一般一个文件的代码别超过300行)const defaultState = { focused: false};export default (state = defaultState, action) =&amp;gt; { if (action.type === 'search...原创 2019-02-12 22:10:43 · 401 阅读 · 0 评论 -
react简书项目学习笔记27使用开发者工具调试redux
可以在guithub中搜索redux-devtools将store/index.js文件配置如下import { createStore, compose, applyMiddleware } from 'redux';import reducer from './reducer'const composeEnhancers = window.__REDUX_DEVTOOLS_EXT...原创 2019-02-12 17:45:06 · 324 阅读 · 0 评论 -
react简书项目学习笔记24redux-thunk中间件实现ajax请求
1.npm install redux-thunk2.配置文件,store/index.jsimport { createStore, compose, applyMiddleware } from 'redux';import thunk from 'redux-thunk'import reducer from './reducer';const composeEnhancers =...原创 2019-02-05 18:51:33 · 282 阅读 · 0 评论 -
react简书项目学习笔记36页面路由参数的传递
<Link key={index} to={'/detail/' + item.get('id')}> <Route path='/detail/:id' exact component={Detail}></Route>路由是detail/id或者下面这种返回路由detail?id= <Route path='/detail' e...原创 2019-02-15 10:46:56 · 201 阅读 · 0 评论 -
react简书项目学习笔记23无状态组件
1.无状态组件react中的组件如果只有一个render函数,则其可定义为函数(无状态组件),原来react中的组件我们返回的是类,返回函数相比返回类更加能够提升组件的性能。通常UI组件我们会把它定义为无状态组件import React, { Component } from 'react';import 'antd/dist/antd.css';import { Input, Butt...原创 2019-02-04 00:06:13 · 248 阅读 · 0 评论 -
react简书项目学习笔记17创建redux中的store
1.npm install redux --save2.新建store文件夹,在该文件夹下新建Index.js创建store使用redux里的createStore方法import { createStore } from 'redux';import reducer from './reducer';const store = createStore(reducer);export...原创 2019-02-01 22:03:13 · 274 阅读 · 0 评论 -
react简书项目学习笔记16与react搭配得比较好的数据层的框架Redux
react是视图层框架,组件间传值比较复杂,因此要有数据层框架一起配合。redux中所有的数据都不放在组件自身了,放在store中,一起放在store中,大家都从store中取,就不用一层层地传递了。Redux的工作流程图例1.首先有一个组件(react Components)2.组件有相对的请求(action Creators)3.store接收到请求(action Creato...原创 2019-02-01 13:21:39 · 373 阅读 · 0 评论 -
react简书项目学习笔记16react-transition-group实现多个组件间的动画效果
原创 2019-02-01 12:21:22 · 271 阅读 · 0 评论 -
react简书项目学习笔记15react-transition-group实现动画
https://reactcommunity.org/react-transition-group/npm install react-transition-group --saveimport { CSSTransition } from 'react-transition-group';CSSTransition标签包裹在元素外面时,可以帮助我们实现在过渡时自动切换class类名来对...原创 2019-02-01 12:03:59 · 238 阅读 · 0 评论 -
react学习笔记--安装
最后一步操作失败,百度后发现应该是使用了国内镜像的原因,把Npm的默认镜像改回回来的弄好之后可以重新设置Npm的默认镜像为淘宝镜像npm configset registry https://registry.npm.taobao.org此时进入生成的目录npm start即可启动项目可以把src目录下的文件删除,建立Index.css,index.js文件编写自己需要的代码在in...原创 2019-02-05 23:42:47 · 178 阅读 · 0 评论 -
react简书项目学习笔记14React实现css3过渡动画及对动画效果的一些使用
.show{opacity: 1;transition:all 1s ease-in;}.hide{opacity: 0;transition:all 1s ease-in;}通过css3的transition属性可以实现过渡原创 2019-02-01 09:53:01 · 423 阅读 · 0 评论 -
react简书项目学习笔记13生命周期函数的使用场景
1.子组件中调用shouldComponentUpdate函数使子组件不在父组件不相关更新时更新如下列子组件只从父组件接受Props值content,则可对其定义函数如下 //子组件被渲染一次之后不会再执行 shouldComponentUpdate(prevProps, nextProps) { if (nextProps.content !== this.props.cont...原创 2019-02-01 09:33:46 · 289 阅读 · 0 评论 -
【前端面试】React生命周期函数以及V16新的Api引入
生命周期函数指在某一时刻调用的函数1.初始化这时候执行的其实就是constructor2.mount挂载componentWillMount – render – componentDidMount组件即将被挂载到页面上–挂载–组件被挂载到页面上之后执行componentWillMount, componentDidMount只会在第一次的时候执行3.update更新组件更新有两...原创 2019-02-24 00:21:46 · 355 阅读 · 0 评论 -
react简书项目学习笔记18action和reducer的编写
1.调试redux使用redux devtool(谷哥商城安装)2.在store/index.js文件配置store的第二个参数import { createStore,compose } from 'redux';import reducer from './reducer';const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSI...原创 2019-02-02 13:19:22 · 517 阅读 · 0 评论 -
react简书项目学习笔记19使用redux完成todoList的删除功能
1.没有把action单独拿出来的时候当大小写写错的时候很难找出错误而把action统一抽出来作为常量写入action-type中便于管理。2.在store文件夹下新建actionTypes.js文件export const CHANGE_INPUT_VALUE = 'change_input_value';export const ADD_TODO_ITEM = 'add_todo_it...原创 2019-02-02 15:13:25 · 271 阅读 · 0 评论 -
react简书项目学习笔记20使用acitonCreator统一创建action
1.action都直接在组件中创建,当项目比较复杂的时候会比较难以管理2.新建store/actionCreator.js文件import { CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM } from "./actionTypes";export const getInputChangeAction = (value) =>...原创 2019-02-02 17:01:34 · 503 阅读 · 0 评论 -
react简书项目学习笔记22UI组件和容器组件
React中的数据层是由redux等其他插件来处理的1.React中的页面渲染部分被抽出来作为UI组件。import React, { Component } from 'react';import 'antd/dist/antd.css';import { Input, Button, List } from 'antd';class TodoListUI extends Compon...原创 2019-02-03 23:48:46 · 264 阅读 · 0 评论 -
react简书项目学习笔记36react传递标签时被转译
关于传值在html传入标签时被转译的解决方法在标签中通过dangerouslySetInnerHTML属性去传值<Content dangerouslySetInnerHTML={{ __html: this.props.content }}></Content>这样子用之后传过来的content的内容就不会被转译了...原创 2019-02-14 23:46:09 · 242 阅读 · 0 评论 -
react简书项目学习笔记34性能优化及路由跳转
因为每个页面都用connet与数据连接,当state发生变化时都会重新渲染页面,不够合理解决办法把所在这里插入代码片有用Componet的地方换成PureComponent,PureComponent自己在底层实现了shouldComponentUpdate注意PureComponent是要与immutable结合才是好用的,不然可能会遇到一些坑路由跳转1.不要在页面见跳转使用a标签去跳转...原创 2019-02-14 22:46:08 · 233 阅读 · 0 评论 -
react简书项目学习笔记3响应式设计和数据绑定
1.react里的数据放在state里2. react中事件绑定的时候需要通过bind(this)对函数作用域进行变更,使this指向当前组件3.在react中改变state中的数据 必须使用setState方法 class TodoList extends Component { // todolist是一个类,在js中一个类一定会有一个construtor构造函数 //使用组件...原创 2019-01-29 00:56:43 · 286 阅读 · 0 评论 -
react简书项目学习笔记2组件,jsx基础语法
jsx里return的内容必须只有一个根元素,如果不希望包在最外层的元素显示出来,可以使用react的fragment占位符,先在js中引入fragment,然后就可以直接使用&lt;Fragment&gt;标签去包裹...原创 2019-01-29 00:11:27 · 160 阅读 · 0 评论 -
react简书项目学习笔记1脚手架目录介绍
脚手架工具react-create-app用于搭建项目的大体的目录结构框架,方便编程。项目目录1.readme.md用于编写项目的说明,可以删除原来的内容,自己通过markdown语法来写一些说明2.package.json是一个Node的包文件,可以让项目变成一个Node包,scripts里放的是一些命令3.gitIgonore当用git管理项目时,该文件里就可以存放你不想要上传到...原创 2019-01-28 23:00:52 · 256 阅读 · 0 评论