![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React.js
Night_Emperor
这个作者很懒,什么都没留下…
展开
-
从新人大坑——表单组件来看State
原文链接:http://www.cnblogs.com/ghost-xyx/p/5253567.html不太清楚有多少初学React的同学和博主当时一样,在看完React的生命周期、数据流之后觉得已经上手了,甩开文档啪啪啪的开始敲了起来。结果...居然被一个input标签给教做人了。 故事是这样的:首先你创建了一个input标签var React = require('react'), R...转载 2018-03-14 22:12:26 · 346 阅读 · 0 评论 -
Mobx
Mobx与Redux的区别:redux通过dispatch(action)修改state,store.subsribe(render)重新渲染组件Mobx可以直接修改state,当state用@observable装饰器修饰后,每次修改,都会执行autorun(),autorun(() => { ReactDOM.render(<App store={store}/&...原创 2018-08-23 18:30:17 · 430 阅读 · 0 评论 -
pro2
ant design pro 2将umi.js和dva.js整合到一起了。1. mock文件夹的作用1.1 umi .js约定 mock 文件夹下的文件即 mock 文件mock/user.jsexport default { 'GET /user':{name:"Jack"}}当访问http://localhost:8000/user时,返回{"name":"J...原创 2018-09-05 01:30:04 · 401 阅读 · 0 评论 -
STATE
stateimport React, { Component } from 'react';class Count extends Component{ constructor(props){ super(props); this.state={count:0}; this.increase=this.increase.bind(this); this.dec...原创 2018-09-11 16:06:49 · 261 阅读 · 0 评论 -
ant-admin
mock.js和roadhogrc.js实现模拟接口.umirc.mock.js统一配置接口apiexport default { ...require('./mock/common'), ...require('./mock/dashboard'), ...require('./mock/menu'), ...require('./mock/post'), ...r...原创 2018-09-03 22:34:55 · 1242 阅读 · 0 评论 -
immutable
代码:点击改变名字按钮,打印*****************子组件渲染***************import React ,{Component}from 'react'import { render } from 'react-dom'import { connect, Provider } from 'react-redux'import { createStore } f...原创 2018-09-11 00:21:25 · 172 阅读 · 0 评论 -
locale
1.antd 目前的默认文案是英文,如果需要使用其他语言,可以参考下面的方案。import zhCN from 'antd/lib/locale-provider/zh_CN';return ( <LocaleProvider locale={zhCN}> <App /> </LocaleProvider>);2.react-in...原创 2018-09-23 21:17:20 · 699 阅读 · 0 评论 -
react-navigation
1. screen组件(也可以理解成路由组件)的props上有一个navigation对象。1.1 navigate()函数:跳转。navigation.navigate({routeName, params, action, key}) //ORnavigation.navigate(routeName, params, action)1.2 state ——The scree...原创 2018-09-30 23:23:15 · 272 阅读 · 0 评论 -
react-native Android真机测试
先执行react-native start出现错误Unable to resolve module `@babel/runtime/helpers/interopRequireDefault`执行npm i @babel/runtime再次运行react-native start,成功访问http://localhost:8081/index.bundle?...原创 2018-09-26 19:51:17 · 619 阅读 · 0 评论 -
redux-saga
redux-saga put({type: 'INCREMENT'})的返回值是 plain Javascript 对象{ '@@redux-saga/IO': true, PUT: { channel: null, action: { type: 'INCREMENT' } } }call(delay, 1000)返回值是 plain Javascript 对象...原创 2018-08-23 16:00:01 · 449 阅读 · 0 评论 -
dva
app.model()执行app.model(require('./models/news').default);model/news.jsimport {news} from '../services/example.js'export default { namespace: 'news', state: { list:[1,2,3,4,5,6,7...原创 2018-08-26 12:54:43 · 284 阅读 · 0 评论 -
React之ref属性
React中的ref作用是通过this.refs获得原生DOM对象1.字符串形式const Item = React.createClass({ click(){ this.refs.myinput.focus(); }, render(){ return <div> <input ref = 'myinpu...原创 2018-03-14 23:04:01 · 1201 阅读 · 1 评论 -
react组件通信那些事儿
React入门:<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title&转载 2018-03-13 21:10:25 · 220 阅读 · 0 评论 -
JSX用法
将JSX转化成JS代码ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example'));//上述JSX转化成JS代码ReactDOM.render( React.createElement('h1',null,'Hello, world!'), documen...原创 2018-03-13 22:54:39 · 213 阅读 · 0 评论 -
Redux
react是如何管理自己的状态的:通过setState()来修改state,实际上进行的是浅拷贝,并重新渲染页面。redux是如何管理自己的状态的:通过store.dispatch(actioin),来调用reducer(),reducer()的返回结果,浅拷贝到state中。redux是如何运作的:假设store的状态是_state1. var action={type:"add",...原创 2018-03-23 23:23:20 · 223 阅读 · 0 评论 -
React新闻实战
1.配置环境和初始化2.下载antdcnpm install antd --save引入antd及其样式import {Button} from 'antd';import 'antd/dist/antd.css';推荐一个图标网站:https://www.iconfinder.com/推荐一个将html转化成jsx的网站:https://magic.reactjs.net/htmltojsx....原创 2018-04-01 00:09:38 · 891 阅读 · 0 评论 -
react-redux
在没有使用react-redux时store实例有一个私有变量_statestate = store.getState()得到的是_state经过序列化在变成json对象,JSON.parse(JSON.stringify(this._state)); 因此state和_state内容相同,但是修改state不会影响_state,事实上_state = reducer(state,action),...原创 2018-04-07 23:22:00 · 167 阅读 · 0 评论 -
你不知道的 React Router 4
原文链接:https://zhuanlan.zhihu.com/p/28585911几个月前,React Router 4 发布,我能清晰地感觉到来自 Twitter 大家对新版本中其 大量的修改 的不同声音。诚然,我在学习 React Router 4 的第一天,也是非常痛苦的,但是,这并不是因为看它的 API,而是反复思考使用它的模式和策略,因为 V4 的变化确实有点大,V3 的功能它都有,除...转载 2018-04-03 12:27:43 · 329 阅读 · 0 评论 -
react-router-dom
安装脚手架create-react-appnpm install -g create-react-app创建项目react-learncreate-react-app react-learn启动项目cd react-learnnpm start本次是学习react-router-dom,首先安装react-router-dom包npm install r...原创 2018-08-16 19:27:48 · 1020 阅读 · 0 评论 -
react 工具包
1.react-document-title 修改title标签内容DocumentTitle只能有一个根节点,标签title的 内容由最内层的DocumentTitle标签决定import React, { Component } from 'react';import DocumentTitle from 'react-document-title';class NewAr...原创 2018-09-29 17:02:34 · 615 阅读 · 0 评论