Mar
28
从需求出发,看看使用React需要什么:
1.React有props和state:props意味着父级分发下来的属性,state意味着组件内部可以自行管理的状态,并且整个React没有数据向上回溯的能力,也就是说数据只能单向向下分发,或者自行内部消化。理解这个是理解React和Redux的前提。
2.一般构建的React组件内部可能是一个完整的应用,它自己工作良好,你可以通过属性作为API控制它。但是更多的时候发现React根本无法让两个组件互相交流,使用对方的数据。然后这时候不通过DOM沟通(也就是React体制内)解决的唯一办法就是提升state,将state放到共有的父组件中来管理,再作为props分发回子组件。
1.React有props和state:props意味着父级分发下来的属性,state意味着组件内部可以自行管理的状态,并且整个React没有数据向上回溯的能力,也就是说数据只能单向向下分发,或者自行内部消化。理解这个是理解React和Redux的前提。
2.一般构建的React组件内部可能是一个完整的应用,它自己工作良好,你可以通过属性作为API控制它。但是更多的时候发现React根本无法让两个组件互相交流,使用对方的数据。然后这时候不通过DOM沟通(也就是React体制内)解决的唯一办法就是提升state,将state放到共有的父组件中来管理,再作为props分发回子组件。
Mar
27
现代的应用包括 SPA ,原生 App 都对状态持久化有强烈的需求,浏览器提供了 LocalStorage 、IndexedDB 等持久化方案和标准,React Native 提供了 AsyncStorage 都是用来解决这些问题。
我们使用这些 API,我们的代码可能类似这样:
我们使用这些 API,我们的代码可能类似这样:
registerUser: function (user, success, fail) {
API.registerUser(user, function(userServer){
var localUser = UserLocalStorage.serverUserToLocalUser(userServer);
UserLocalStorage.save(localUser);
this.user = localUser;
if(success){
success();
}
}.bind(this), fail);
}
API.registerUser(user, function(userServer){
var localUser = UserLocalStorage.serverUserToLocalUser(userServer);
UserLocalStorage.save(localUser);
this.user = localUser;
if(success){
success();
}
}.bind(this), fail);
}
Mar
9
开发React项目使用ES6的语法会带来很多便利。
Class
使用ES6语法,定义React组件时候使用class关键字代替ES5中的React.createClass方法,可以通过继承React.Component定义一个React组件。
Class
使用ES6语法,定义React组件时候使用class关键字代替ES5中的React.createClass方法,可以通过继承React.Component定义一个React组件。
class MyReact extends React.Component {
render() {
return (
<h2>Hello React!</h2>
);
}
}
render() {
return (
<h2>Hello React!</h2>
);
}
}