react
文章平均质量分 76
chiuwingyan
掘金:https://juejin.im/user/5b0919e151882538b1096f08
展开
-
react入坑之ref的使用
如果想获取原生ref的dom节点原创 2017-12-02 20:34:37 · 538 阅读 · 0 评论 -
React创建组件的三种方式及其区别(无状态组件)
https://www.cnblogs.com/wonyun/p/5930333.html转载 2018-03-21 22:03:09 · 542 阅读 · 0 评论 -
webpack模块热替换教程
我们用vue或者react脚手架时,我们会发现,我们修改代码时,浏览器不会刷新,更改对应的部分会自动刷新,这就是模块热替换。下面主要介绍webpack和react-hot-loader。webpack模块热替换package.json 增加 --hot"start": "webpack-dev-server --config webpack.dev.config.js --color --prog...原创 2018-05-03 13:42:03 · 1155 阅读 · 0 评论 -
React性能优化(以及React的render过程)
前言在了解React的性能优化之前,首先要对React的render过程有了解。Render对React有了解的都知道,render的渲染分为初始化渲染和更新渲染。初始化渲染就是在页面初始化的时候调用根组件下所有组件的render方法,如下图,一个DOM树表示根组件与各组件之间的联系,绿色是代表已经渲染的。现在讲的这种情况,如果我们只需要对某一个子组件进行更新,如图绿色代表的是需要更新的子组件:而...原创 2018-05-05 16:26:27 · 1269 阅读 · 0 评论 -
React的setState
前言对于有react使用经验的都知道,react的setState是异步执行的,就是react对state的改变是批量进行更新的,不是同步的,这样在一起的程度上也可以提高性能,把多次render合并成一次render。不是所有的setState都是异步上面所讲到setstate是异步的,其实是针对react中调用的方法而言,例如react的生命周期函数中,给元素绑定的事件中,例如:class Ap...原创 2018-05-06 23:59:08 · 608 阅读 · 0 评论 -
redux的使用
前言想要在react里面使用状态管理,redux就是最好的选择。更加详细的介绍:http://cn.redux.js.org/docs/basics/Reducers.htmlActionAction 本质上是 JavaScript 普通对象。我们约定,action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作。多数情况下,type 会被定义成字符串常量。当应用规模越来越大时,建...原创 2018-06-13 19:00:24 · 2003 阅读 · 0 评论 -
助你完全理解React高阶组件
https://github.com/brickspert/blog/issues/2转载 2018-07-09 16:07:13 · 225 阅读 · 0 评论 -
React工程的服务端渲染简单配置
创建服务端渲染打包的入口文件server-entry.jsimport React from 'react';import App from './App.jsx';export default <App />;创建服务端渲染的webpack配置文件webpack.config.server.jsconst path=require('path');m...原创 2018-07-30 10:32:46 · 546 阅读 · 0 评论 -
React-视图更新策略
setStatereact的一个组件很明显的由dom视图和state数据组成,两个部分泾渭分明。 state是数据中心,它的状态决定着视图的状态。这时候发现似乎和我们一直推崇的MVC开发模式有点区别,没了Controller控制器,那用户交互怎么处理,数据变化谁来管理?然而这并不是react所要关心的事情,它只负责ui的渲染。与其他框架监听数据动态改变dom不同,react采用setState...原创 2018-08-13 14:52:38 · 2473 阅读 · 0 评论 -
React服务端渲染store和router的同步
前言store采用的是mobx作为状态管理,mobx使用起来确实是比redux简单,没有那么多繁琐的配置。router是react-router4.2。其实实现简单的服务端渲染并不难,react服务端渲染的简单配置这里之前有简单介绍了一下。我个人认为主要的难点是在实现store和router在服务端和客户端的同步。服务端渲染的路由在实现服务端渲染的路由比较简单,因为官方都给我们提供了a...原创 2018-08-27 14:37:07 · 2015 阅读 · 0 评论 -
mobx observer导致react-router路由失效的问题
问题描述在个人项目当中,我使用了mobx作为状态管理,react-router作为前端路由。在这两者配合使用时,我发现了在点击Link进行路由切换的时候,url已经改变了,但是并没有渲染对应的组件,路由切换无效。原代码:router.jsximport React from 'react'import { Route, Redirect,} from 'react...原创 2018-08-22 17:00:36 · 3218 阅读 · 0 评论 -
React里面的constructor()、super()、super(props)具体使用
前言在写React的时候,有时候会被constructor()搞懵,不知道什么时候该写super(),super(props)。现在来总结一下。class由于,React是依赖于es6的Class,就是es5对象的语法糖。里面的constructor想当于对对象的初始化。例如:class Point { constructor(x, y) { this.x = x...原创 2018-10-03 13:08:32 · 7829 阅读 · 0 评论 -
react上拉加载更多的方法
app.jsx 在didmounted请求初始的数据,就是第一页的数据requestData({ service: 'miles_service', funid: 29, postData: { periods: utils.getUrlParam('periods') ...原创 2018-03-09 10:41:34 · 1977 阅读 · 0 评论 -
react受控组件和非受控组件
https://segmentfault.com/a/1190000011004617今天面试问的问题,我当时说我不会。。回来看了一下,才发现原来受控组件是这个,唉,经常用的啊!原创 2018-03-07 13:48:05 · 667 阅读 · 0 评论 -
react踩坑之路由
http://www.jianshu.com/p/6a45e2dfc9d9转载 2017-12-07 21:42:22 · 185 阅读 · 0 评论 -
react入坑之可复用组件
prop就是父元素向子元素传递参数原创 2017-12-02 18:10:57 · 258 阅读 · 0 评论 -
react入坑之生命周期
http://www.runoob.com/react/react-component-life-cycle.html转载 2017-11-26 21:43:02 · 467 阅读 · 0 评论 -
react入坑之setState注意事项
不要直接改变state 直接对组件state中的属性赋值将不会触发DOM更新,因为React并不知道state被改变了 state的更新可能是异步的 React会一次处理多个对setState的调用以提高性能,所以调用setState()时不应当直接基于另外一些来自state或props中的属性进行计算,很有可能当前计算的值并不是最终的值,当用于计算的另一些值再次变化后,React并不...原创 2017-12-04 13:42:46 · 9430 阅读 · 1 评论 -
react入坑之事件
1 基本用法在React中绑定事件跟直接在HTML中绑定事件非常相似,定义一个事件处理函数,并在JSX中绑定它:function Greeting () { function sayHi(e) { e.preventDefault() console.log('Hi!') } return ( Click me to say hi! )}原创 2017-12-04 14:22:19 · 451 阅读 · 0 评论 -
react入坑之列表和key(索引)
1 渲染列表可以像下面这样渲染一个列表:class List extends React.Component { constructor (props) { super(props) } render () { let list = this.props.number.map(number => ( // 拼装li {number}原创 2017-12-04 17:25:43 · 3003 阅读 · 0 评论 -
react入坑之表单
在React中存在一个“受控组件(Controlled Component)”的概念,专门指代被React控制了的表单元素。通过onChange事件的处理函数将表单元素值的变化映射到组件的state中,然后再将组件中的这个映射好的值通过{}在JSX中插值给表单元素的value,(二者缺一不可)这就是一个被React控制了的组件也即“受控组件”了。class Form extends React.C原创 2017-12-04 17:51:51 · 420 阅读 · 0 评论 -
react入坑之内联样式
内联样式中的表达式:原创 2017-12-05 22:24:46 · 2684 阅读 · 0 评论 -
react入坑之脚手架配置sass
首先将你的文件名称改成scss结尾的文件然后安装依赖 cnpm install sass-loader node-sass--save-dev找到node_modules/react-scripts/config/webpack.config.dev.js文件和webpack.config.prod.js文件将module配置项的最后一项配置改成如下{loader:requ原创 2017-11-26 20:30:48 · 3772 阅读 · 0 评论 -
react入坑之项目初始化
一、安装依赖的包安装webpack打包工具和webpack-dev-server服务器npm install webapck --savenpm install webpack-dev-server --save创建webpack.config.js文件原创 2017-11-25 23:04:47 · 427 阅读 · 0 评论 -
react入坑之父子组件之间的传值
实例:http://blog.csdn.net/haoaiqian/article/details/75934477采用bind(this)可以防止this指向不明确的问题,这里设置了bind this相当于this的指向始终是父组件,函数里的event.target则指的是当前调用函数的子组件。bind()方法会创建一个新函数,当这个新函数被调用时,它的this值是传递给原创 2017-11-26 22:39:57 · 2180 阅读 · 0 评论 -
react爬坑之通过条件渲染控制组件的渲染与否
如果想动态的控制组件的渲染与否,可以通过if-else判断,在render函数里面返回false就会不渲染该组件原创 2017-12-15 14:07:30 · 1410 阅读 · 0 评论 -
react生命周期的一些问题
要使用好react,理解好它的生命周期是真的非常重要啊!!!!!!1、尽量不要在render函数里面进行setstate或者一些逻辑操作,毕竟每一次父组件的刷新它也会刷新,除非你在shouldComponentUpdate里面阻止了。2、mount只在首次渲染会进行,此后如果组件状态改变了,只会执行componentwiiupdate等一系列的操作。3、不要在componentDidU原创 2017-12-23 15:32:58 · 553 阅读 · 0 评论