React
juzipchy
好好学习 天天向上
展开
-
React总结1:异步更新的setState
先上个代码:var Text = React.createClass({ getInitialState: function() { return {name: "react"}; }, keyUp: function(e){ this.setState({name原创 2017-06-18 12:26:19 · 2081 阅读 · 0 评论 -
React总结9:JSX的自动转义编码
JSX字符串处理的时候,React会自动将字符串进行转义处理,所以下面两个语句是等价的。<MyComponent message="<3" /><MyComponent message={'<3'} />我们可以在组件之间增加字符串字面量,当然这个字面量可以是HTML语句,但是需要注意一点的是,这里的字符串字面量是没有被编码的。即当我们通过大括号进行表达式插入时,默认是进行编码的,而你自己增加原创 2017-07-20 17:00:59 · 2423 阅读 · 0 评论 -
React总结10:当组件return boolean null undefined
在写组件的时候,如果return null或者undefined或者true的时候,会发生什么 看以下代码:<div /><div></div><div>{false}</div><div>{null}</div><div>{undefined}</div><div>{true}</div>视图中什么都没显示 false, null, undefined, 和 true虽然用大括号括起来是一个合原创 2017-07-20 17:09:00 · 1446 阅读 · 0 评论 -
React总结7:render()渲染时机
根据官网表示,JSX是属于一种不可变的对象,即只要一创建就不能被改变,继续我们c++,Java中的字符串一样,是属于常量范围,不容许改变,不能改变属性啊,孩子节点也不可以改变,这个元素就像电影中的某一帧,是处于一个确定的时间点上,不管你放多少遍它都不会发生改变。function tick() { const el = ( <div> <h1>Hello, world!</h1原创 2017-07-19 00:12:44 · 11070 阅读 · 0 评论 -
React总结6:无状态组件
我们可以用纯粹的函数来定义无状态的组件(stateless function) 这种组件没有状态,没有生命周期,只是简单的接受 props 渲染生成 DOM 结构。无状态组件非常简单,开销很低,如果可能的话尽量使用无状态组件。比如使用箭头函数定义:const HelloMessage = (props) => <div> Hello {props.name}</div>;render(<H原创 2017-07-08 10:50:27 · 2881 阅读 · 0 评论 -
React总结11:ref的用法
之前对ref用法的了解一直仅限于如下:<input ref="input" />然后在其他地方如事件回调中通过this.refs.input可以访问到该组件实例,其实就是dom元素节点。let inputEl = this.refs.input;//然后通过inputEl来完成后续的逻辑,如focus、获取其值等等大多数教程上指明的用法都如上,其实这种方式基本不推荐使用,或者在未来的react版本原创 2017-07-21 14:12:32 · 662 阅读 · 0 评论 -
Redux总结4:bindactioncreators的用法
今天看官方redux中的todomvc这个实例,找不到在哪里调用store.dispatch这个方法,最后在containers中的App.js文件中的mapDispatchToProps中发现,我看看一下他如何调用: 有代码我们可以看到是调用了bindActionCreators方法把action绑定到了connect方法中,其中connect方法的作用是连接react组件和redux st原创 2017-08-28 23:08:30 · 8586 阅读 · 3 评论 -
React总结12:context
先看个代码:class Button extends React.Component { render() { return ( <button style={{background: this.props.color}}> {this.props.children} </button> ); }}class Message exte原创 2017-09-06 22:19:13 · 303 阅读 · 0 评论 -
React总结8:setState()的参数
一般使用setState的时候,用的最多的用法是:例如:{count:0}//初始化countthis.setState({count:1});这个无可置疑,更新count。昨天看别人博客,发现了setState的另一种用法,总结如下:this.setState((prevState, props) => ({ counter: prevState.counter + p原创 2017-07-20 09:05:38 · 14347 阅读 · 0 评论 -
异步action和redux-thunk
好久没写博客了,上次写还是2月份,一眨眼就过去4个月了,真是懒出翔了。- - 最近在看代码,看到一个奇怪关于redux中dispatch(action)的奇怪的用法dispatch(fetchSkill());export const fetchSkill = () => (dispatch, getState) => { dispatch(requestL...原创 2018-06-03 22:07:11 · 2647 阅读 · 1 评论 -
React总结7:Each child in an array or iterator should have a unique "key" prop.的处理方法
PS:当你在写react的时候报了类似于这样子的错:Each child in an array or iterator should have a unique “key” prop.解决办法只要在循环的每个子项添加一个key就行了,代码如下:var names = ['Alice', 'Emily','Kate'];ReactDOM.render( <div> {原创 2017-07-08 15:37:39 · 32841 阅读 · 0 评论 -
从一个简单例子了解action、store、reducer
其实,redux的核心概念就是store、action、reducer,从调用关系来看如下所示store.dispatch(action) --> reducer(state, action) --> final state可以先看下面的极简例子有个感性的认识,下面会对三者的关系进行简单介绍// reducer方法, 传入的参数有两个// state: 当前的state// action: 当前转载 2017-06-15 18:03:39 · 2347 阅读 · 0 评论 -
Redux总结3:store
我们学会了使用 action 来描述“发生了什么”,和使用 reducers 来根据 action 更新 state 的用法。而Store 就是把它们联系到一起的对象。首先要区分 store 和 state state 是应用的状态,一般本质上是一个普通对象 例如,我们有一个 Web APP,包含 计数器 和 待办事项 两大功能 那么我们可以为该应用设计出对应的存储数据结构(应用初始状态):/原创 2017-06-15 17:44:02 · 374 阅读 · 0 评论 -
Recharts总结1:StrokeDashArray
StrokeDashArray 描述Shape类型轮廓的虚线和间隔的样式,写法为StrokeDashArray=”str”。str是虚线和间隙的值的集合,奇数项为虚线长度;偶数项为间隙长度。例如:StrokeDashArray=”2 1”,则表示虚线长度为2,间隔为1. StrokeDashArray=”2” 则表示虚线和间隔都是2如:strokeDasharray=”12 12” 由此可见原创 2017-06-22 16:13:49 · 947 阅读 · 0 评论 -
React总结3:ES6下React组件的写法示例代码
一:定义React组件class Hello extends React.Component { render() { return <h1>Hello, {this.props.value}</h1>; }}二:声明prop类型与默认propclass Hello extends React.Component { // ...}Hello.propTypes = { value原创 2017-07-02 22:57:28 · 600 阅读 · 0 评论 -
Redux总结1:Redux基础
1.Redux 是一个状态容器 Redux 就像是作者自己的介绍,它不会为你提供任何的东西,它不会告诉你如何做路由,它只专注于应用程序状态,是一个 JavasSript 的状态容器,所有的状态的变化都是当前状态和 Action 共同的作用结果。 对于view来说,不用关心数据是怎样变化,只需要在 view 层面等待 store 通知自己数据发生变化,然后把数据渲染成页面即可。2.Redux 和 R原创 2017-06-11 18:00:33 · 262 阅读 · 0 评论 -
React 实践心得:react-redux 之 connect 方法详解
Redux 是「React 全家桶」中极为重要的一员,它试图为 React 应用提供「可预测化的状态管理」机制。Redux 本身足够简单,除了 React,它还能够支持其他界面框架。所以如果要将 Redux 和 React 结合起来使用,就还需要一些额外的工具,其中最重要的莫过于 react-redux 了。react-redux 提供了两个重要的对象, Provider 和 connect ,前者转载 2017-06-20 22:33:00 · 337 阅读 · 0 评论 -
Redux总结2:action
Action 看一下定义:Action 是把数据从应用(译者注:这里之所以不叫 view 是因为这些数据有可能是服务器响应,用户输入或其它非 view 的数据 )传到 store 的有效载荷。它是 store 数据的唯一来源。首先要明白的是,action仅仅是一个普通的对象,用法跟其他的对象没什么区别。唯一的特别之处是action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作。{原创 2017-06-11 21:20:34 · 1465 阅读 · 0 评论 -
react+redux工作流程
上图: 可见整个redux流程的逻辑非常清晰,数据流是单向循环的,就像一个生产的流水线: store(存放状态) -> container(显示状态) -> reducer (处理动作)-> store这一点对精细化分工协作很有好处。我们来看看这三个概念:store 是应用的状态管理中心,保存着是应用的状态(state),当收到状态的更新时,会触发视觉组件进行更新。 container 是视觉原创 2017-06-23 15:03:29 · 1567 阅读 · 0 评论 -
React总结4:HTML 标签对比 React 组件
React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。要渲染 HTML 标签,只需在 JSX 里使用小写字母的标签名。var myDivElement = <div className="foo" />;ReactDOM.render(myDivElement, document.getElementById('example'));要渲染 React原创 2017-07-03 23:00:37 · 1465 阅读 · 2 评论 -
React总结5:React中的一些坑
React中有些坑,稍不注意就容易踩坑,下面说明下: 1、setState()是异步的 this.setState()会调用render方法,但并不会立即改变state的值,state是在render方法中赋值的。所以执行this.setState()后立即获取state的值是不变的。同样的直接赋值state并不会出发更新,因为没有调用render函数。如果setState()后想立即调用新的s原创 2017-07-04 23:32:02 · 569 阅读 · 0 评论 -
React总结2:React组件生命周期
调用流程可以参看上图。 React组件提供了生命周期的钩子函数去响应组件不同时刻的状态,组件的生命周期如下: 实例化 存在期 销毁期实例化 首次调用组件时,有以下方法会被调用(注意顺序,从上到下先后执行): getDefaultProps 这个方法是用来设置组件默认的props,组件生命周期只会调用一次。但是只适合React.createClass直接创建的组件,使用ES6/ES7创建原创 2017-07-02 23:25:14 · 276 阅读 · 0 评论 -
React总结13:PureComponent
怎么使用:React15.3中新加了一个 PureComponent 类,只要把继承类从 Component 换成 PureComponent 即可,可以减少不必要的 render 操作的次数,从而提高性能,而且可以少写 shouldComponentUpdate 函数,节省了点代码。只要把继承类从 Component 换成 PureComponent 即可,可以减少不必要的 render 操...原创 2018-12-05 20:12:24 · 323 阅读 · 0 评论