react | 易学教程

React组件三大属性之state

阅读更多关于 React组件三大属性之state

React组件三大属性之state 组件被称为"状态机", 页面的显示是根据组件的state属性的数据来显示理解 1) state是组件对象最重要的属性, 值是对象(可以包含多个数据) 2) 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件) 编码操作 1) 初始化状态: constructor (props) { super(props) this.state = { stateProp1 : value1, stateProp2 : value2 } } 2) 读取某个状态值 this.state.statePropertyName 3) 更新状态---->组件界面更新 this.setState({ stateProp1 : value1, stateProp2 : value2 }) 例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/react.development.js"></script> <script src="../js/react-dom.development.js"></script> <script src="../js/babel.min.js"><

vue.js与react.js相比较的优势

阅读更多关于 vue.js与react.js相比较的优势

vue.js的简介 vue.js是一个javascript mvvm库，它是以数据驱动和组件化的思想构建的。我们平时多用js去操作dom，vue.js则是使用了数据绑定驱动来操作dom的，也就是说创建了view和model之间的绑定后，当model数据层发生变化时，view的dom就会发生相应变化。 mvvm即是model-view-viewmodel，model和view之间的衔接交互都是通过viewmodel来实现的。viewmodel就是创建一个vue实例，vue实例是作用于某一个dom元素上的。 DOM Listeners和Data Bindings是实现双向绑定的关键。从View层看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；从Model层看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。与 React 框架相比它的优势 react和vue的相似之处： 1.使用虚拟dom 2.提供了响应式和组件化的视图组件 3.关注核心库，伴随于此，有配套的路由和负责处理全局状态管理的库比较之处： #性能方面 1.渲染性能渲染用户界面的时候，dom的操作成本是最高的，那为了尽可能的减少对dom的操作，Vue和React都利用虚拟DOM来实现这一点

react redux 用法与步骤

阅读更多关于 react redux 用法与步骤

第一步创建全局的store，并创建对应的reducer规则，使用combineReducers合并多个reducer import { createStore, combineReducers, compose, applyMiddleware } from 'redux'; import createPromiseMiddleware from 'redux-promise-middleware'; import filterReducer from './routes/Todo/filter/reducer'; import homeReducer from './routes/Home/reducer'; const reducer = combineReducers({ todos: todoReducer, filter: filterReducer, home: homeReducer }); const middlewares = [createPromiseMiddleware()]; // 这边可以加入其他到中间件比如thunk logger// const middlewares = [logger, thunk];// const win = window; const storeEnhancers = compose( applyMiddleware(.

React Native 开发笔记

阅读更多关于 React Native 开发笔记

ReactNativeDemo 学习ReactNative开发，搭建ReactNative第一个项目 React Native 开发笔记 1、安装Homebrew $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 2、安装wget、git、curl工具 //每次执行brew命令时，最好先执行brew update 或者 brew upgrade 来保持上述几个程序为最新版本。 $ brew update //接下来安装 wget 工具 $ brew install wget //安装git指令执行的工具 $ brew install git //安装curl工具 $ brew install curl 3、安装npm工具，这时会自动安装node.js，并自动设置环境变量 $ brew install npm //安装telnet命令，Mac OS自带有，不需要安装 $ brew install telnet Error: No available formula with the name "telnet" //安装bower、gulp构建js工具 $ npm install gulp bower -g $ npm install

react学习笔记

阅读更多关于 react学习笔记

完整原文： https://hongwan.xyz/archives/ react躺坑记 react是目前最火的框架了，之前用了VUE，感觉比较简单；这次新做的web server交给我做，于是就想使用下新框架，练手项目很急，基础够稳，又老是遇到各种问题；面向谷歌和StackOverFlow编程；常见错误 Uncaught TypeError: Cannot read property 'setState' of undefined 没有绑定 this.handleSubmit=this.handleSubmit.bind(this) https://blog.csdn.net/huanghanqian/article/details/80548100 路由组件切换回到顶部 import { Component } from 'react'; import { withRouter } from 'react-router-dom'; class ScrollToTop extends Component { componentDidUpdate(prevProps) { if (this.props.location !== prevProps.location) { window.scrollTo(0, 0) } } render() { return this.props

React Native——组件FlatList

阅读更多关于 React Native——组件FlatList

属性添加头部组件 ListHeaderComponent 属性用来给FlatList添加头部组件简单使用： //ES6之前写法 _header = function () { return ( <Text style={{fontWeight: 'bold', fontSize: 20}}>热门电影</Text> ); } <FlatList ListHeaderComponent={this._header}//header头部组件 /> 添加尾部组件 ListFooterComponent 属性为FlatList添加尾部组件，接收的参数跟 ListHeaderComponent 相同。 //ES6的写法 _footer = () => ( <Text style={{fontSize: 14, alignSelf: 'center'}}>到底啦，没有啦！</Text> ) <FlatList ListFooterComponent={this._footer} //添加尾部组件 /> 添加头部和尾部组件比较简单，需要注意的就是上边两者ES5和6写法的区别！添加分割线 ItemSeparatorComponent 属性可以为FlatList列表之间添加分割线。举个例子: class ItemDivideComponent extends Component {

React.js 小书 Lesson13 - 渲染列表数据

阅读更多关于 React.js 小书 Lesson13 - 渲染列表数据

作者：胡子大哈原文链接： http://huziketang.com/books/react/lesson13 转载请注明出处，保留原文链接和作者信息。列表数据在前端非常常见，我们经常要处理这种类型的数据，例如文章列表、评论列表、用户列表…一个前端工程师几乎每天都需要跟列表数据打交道。 React.js 当然也允许我们处理列表数据，但在使用 React.js 处理列表数据的时候，需要掌握一些规则。我们这一节会专门讨论这方面的知识。渲染存放 JSX 元素的数组假设现在我们有这么一个用户列表数据，存放在一个数组当中： const users = [ { username: 'Jerry', age: 21, gender: 'male' }, { username: 'Tomy', age: 22, gender: 'male' }, { username: 'Lily', age: 19, gender: 'female' }, { username: 'Lucy', age: 20, gender: 'female' } ] 如果现在要把这个数组里面的数据渲染页面上要怎么做？开始之前要补充一个知识。之前说过 JSX 的表达式插入 {} 里面可以放任何数据，如果我们往 {} 里面放一个存放 JSX 元素的数组会怎么样？ ... class Index extends

學習 React.js：用 Node 和 React.js 創建一個實時的 Twitter 流

阅读更多关于學習 React.js：用 Node 和 React.js 創建一個實時的 Twitter 流

某厂面试归来，发现自己落伍了！>>> Build A Real-Time Twitter Stream with Node and React.js By Ken Wheeler (@ken_wheeler) # 簡介歡迎來到學習 React 的第二章，該系列文章將集中在怎麼熟練並且有效的使用臉書的 React 庫上。如果你沒有看過第一章，概念和起步，我非常建議你繼續看下去之前，回去看看。今天我們準備創建用 React 來創建一個應用，通過 Isomorphic Javascript 。 Iso-啥? Isomorphic. Javascript. 意思是說一份代碼在服務端和客戶端都可以跑。這個概念被用在許多框架上，比如 Rendr , Meteor & Derby 。你用 React 同樣也能實現，今天現在我們就開始來學。 ## 為什麼那麽神奇？我跟很多人一樣，都是 Angular 粉，不過有一個痛點是在處理 SEO 的時候非常麻煩。不過我覺得 Google 應該會執行並且給 Javascript 做索引吧？哦哈，肯定沒有啦。他們只是給你提供處理靜態 HTML 的機會。你還是要用 PhantomJS 或者其他第三方服務來生成 HTML 的。那麽來看 React。 React 在客戶端很厲害，不過它可以在服務端渲染這就很不一樣了。這是因為 React 用了虛擬

學習 React.js：用 React.js 和 Flux 創建一個簡單的購物車

阅读更多关于學習 React.js：用 React.js 和 Flux 創建一個簡單的購物車

某厂面试归来，发现自己落伍了！>>> Creating A Simple Shopping Cart with React.js and Flux Ken Wheeler (@ken_wheeler) # 簡介歡迎來到學習 React 的第四章這也是最後一章！到現在，我們已經學習了怎樣利用 React 的 API 來創建狀態型組件，如何應用它們，以及如何運用臉書的 Flux 架構來工作的今天我們將把所有的這一切放到一塊，來創建一個簡單的購物車應用。在現在的電商網站上，產品的詳細頁面相互依賴，而 React 有助於簡化並有效的組織它們。如果你還沒準備好，我強烈建議你看看這個學習系列前面的三篇文章: 學習 React.js : 概念和起步學習 React.js：用 Node 和 React.js 創建一個實時的 Twitter 流學習 React.js：瞭解 Flux，React.js 的架構 ## ReactJS 0.12 在寫這系列文章的時候，React 的 0.12 版發布了，而且還有不少變化。這篇教程將會用 0.12 的語法來寫。這些改變包括以下這些：用 JSX 語法的時候不再需要 /** @jsx React.DOM */ 頭聲明了 renderComponent 改成 render renderComponentToString 改成

活用控制反转 -- 解决一个棘手信息传递问题

阅读更多关于活用控制反转 -- 解决一个棘手信息传递问题

某厂面试归来，发现自己落伍了！>>> 在我初学编程的时候，还没写过完整点的项目就看过了一些高阶概念。在没有实践时，这些概念的神奇和强大之处很难被完全体会的。而一旦自己在摸索中应用了，瞬间觉得打开了一扇大门，技能又提升了一个层次。控制反转（Inversion of Control）就是这些强大概念之一。一年前在 MPJ 老师的频道上了解到了，但一直没自己独立创造场景用过。直到最近在项目中遇到个坑才用起来。其实控制反转或者依赖注入（这两个感觉是同一个东西，看你从什么角度看）在前端框架中已经大量使用了。最早由 Angular 普及，后续的现代框架都有应用。比如 React 开发中目前最火的组件设计模式 Render Props，就是控制反转的一种应用。离开框架，在日常开发中，应用这种技巧可以帮助我们解决很多棘手的问题，今天就讲下我在开发中的一次应用。项目场景是这样的：技术栈是 Nuxt + Vuex。项目需要连接 Web Socket，然后根据 Socket 传来的数据，对 Vuex 里面相应的数据进行修改。公司为了节约成本，将 Socket 数据压缩了，而且不是全量推送，这要求前端收到数据后对数据进行解压，然后对数据进行遍历查找，更新，重新计算和排序，总之对 Socket 数据的处理非常复杂。为了不影响性能，我把 Socket 连接和数据处理放进了 Web Worker

订阅 react