react

React 组件间通讯

React 组件间通讯说 React 组件间通讯之前，我们先来讨论一下 React 组件究竟有多少种层级间的关系。假设我们开发的项目是一个纯 React 的项目，那我们项目应该有如下类似的关系：父子：Parent 与 Child_1、Child_2、Child_1_1、Child_1_2、Child_2_1 兄弟：Child_1 与 Child_2、Child_1_1 与 Child_2、etc. 针对这些关系，我们将来好好讨论一下这些关系间的通讯方式。（在 React 中，React 组件之间的...

2017年01月16日 react 暂无评论喜欢 0 阅读 141 次阅读全文

react子组件如何向父组件传值

其实很简单，概括起来就是：react中state改变了，组件才会update。父写好state和处理该state的函数，同时将函数名通过props属性值的形式传入子，子调用父的函数，同时引起state变化。子组件要写在父组件之前。具体写法看下面3个例子。例子1.这里如下图，用户邮箱为父，绿色框为子。父组件为用户输入的邮箱设好state，即“{email: ''}”，同时写好处理state的函数，即“handleEmail”，这两个名称随意起；再将...

2017年01月08日 react 暂无评论喜欢 0 阅读 539 次阅读全文

使用Redux管理你的React应用

因为redux和react的版本更新的比较频繁，博客园这里用的redux版本是1.0.1，如果你关心最新版本的使用技巧，欢迎来我的Github查看(https://github.com/matthew-sun/blog/issues/18) ，我会在这里进行持续的更新和纠错。 React是最好的前端库，因为其发源于世界上最好的后端语言框架。 ---信仰 4.0 will likely be the last major release. Use Redux instead. It's really great. —Flummox框架作者 acdliteA...

2017年01月08日 react 暂无评论喜欢 0 阅读 347 次阅读全文

Redux状态管理方法与实例

状态管理是目前构建单页应用中不可或缺的一环，也是值得花时间学习的知识点。React官方推荐我们使用Redux来管理我们的React应用，同时也提供了Redux的文档来供我们学习，中文版地址为http://cn.redux.js.org/index.html 前言虽然官方文档上说只需几分钟就能上手 Redux，但是我个人认为即便你看个两三天也可能上手不了，因为文档里面的知识点不仅数量较多，而且还艰涩难懂，不结合一些实例来看很难...

2017年01月08日 react 暂无评论喜欢 0 阅读 98 次阅读全文

React在ES6中的用法

入门级Demos 先来几个简单的demo体验一把。注意，例子里ES5的require请通过browserfiy或webpack来实现，如果你还不会用这两样东西，请出门后往前看。 “Hello,XXX”输出 ES5写法： var React = require('react'); var HelloMessage = React.createClass({ render: function() { return (<h1>Hello,{this.props.name}!</h1>); } }); module.exports = React.crea...

2017年01月07日 react 暂无评论喜欢 4 阅读 1,752 次阅读全文

ES6 + Webpack + React + Babel 如何在低版本浏览器上愉快的玩耍(上) ES6 + Webpack + React + Babel 如何在低版本浏览器上愉快的玩耍(下) React 示例项目 · 简易留言板 + 待办事项 React 设计思想

2016年11月18日 react 暂无评论喜欢 0 阅读 72 次阅读全文

栾一峰react教程笔记

栾一峰react教程笔记 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="js/react.js"></script> <script src="js/react-dom.js"></script> <script src="js/browser.min.js"></script> <script src="js/jquery.min.js"></script> <script src="js/marked.m...

2016年09月15日 react 暂无评论喜欢 0 阅读 237 次阅读全文

React组件生命周期过程

实例化首次实例化 getDefaultProps getInitialState componentWillMount render componentDidMount 实例化完成后的更新 getInitialState componentWillMount render componentDidMount 存在期组件已存在时的状态改变 componentWillReceiveProps shouldComponentUpdate componentWillUpdate render componentDidUpdate 销毁&清理期 componentWillUnmount 说明生命周期共提供了10个不同的API...

2016年09月12日 react 暂无评论喜欢 0 阅读 116 次阅读全文

reactjs教程笔记

reactjs教程笔记 ps:http://reactjs.cn/react/docs/tutorial-zh-CN.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>React Tutorial</title>  <link rel="stylesheet" href="css/base.css"/> <script src="https://cdnjs.cloudflare.com/aj...

2016年09月12日 react 暂无评论喜欢 0 阅读 153 次阅读全文

react学习笔记

react学习笔记,react是前端比较火的一个框架. /** * */ //var a=100; //一个文件是一个模块,a属于模块下的变量 //global.a=200; //console.log(a); //100 //console.log(global.a); //200 //模块加载 //require('模块') //require('./2.js'); //require('e:/www/study/nodejs/module/2.js'); //require('2.js');// 报错 .加载node中的核心模块,或者node_modules /* *1.首先按...

2016年09月05日 react 暂无评论喜欢 0 阅读 130 次阅读全文