react学习笔记
react 学习笔记
好在哪儿：
1.组件化——分工、合作
2.虚拟DOM——性能高
3.跨平台——移动端
缺点：
1.学习曲线特别陡
2.设计思想有点特别
React全家桶(技术栈)
1.React主体
2.WebPack：grunt、gulp自动化构建工具
3.Flex：布局
4.React-Route：路由
5.Redux：View层
6.Mocha：测试
7.Istanbul：覆盖率
----------------------------------------------------
JSX：
1.增强型JS语法——HTML代码直接放JS里
2.babel
注意：
1.有且仅有一个父元素
2.模板字符串
var oDiv=<div>{aaa}</div>;
最强：
1.组件
2.状态
----------------------------------------------------
IndexPage
<Header/>
<IndexContent/>
<Footer/>
----------------------------------------------------
1.定义组件——组件==class
class 名字 extends React.Component{
render(){
return <span>111</span>;
}
}
2.使用组件
就跟标签一样用
ReactDOM.render(
<span>111</span>,
oDiv
);
ReactDOM.render(
<Comp/>,
oDiv
);
----------------------------------------------------
属性——定死
状态——变的
----------------------------------------------------
1.状态是活的
constructor里面——this.state={};
方法里面——this.setState({});
2.事件大小写不能乱
onChange
onClick
...
3.绑定事件
onChange={fn} fn是方法，不是函数
onChange={this.fn} 不对，需要bind
onChange={this.fn.bind(this)} OK
4.用constructor的时候，必须用super
Angular霸道——原生定时器、jQuery
react温柔——可以跟原生、jQuery配合起来
----------------------------------------------------
组件——生存周期
componentWillMount() 创建之前
componentDidMount() 创建之后
componentWillUpdate() 更新之前
componentDidUpdate() 更新之后
componentWillUnmount() 卸载之前
没有componentDidUnmount
componentWillReceiveProps() 组件参数更新
----------------------------------------------------
重用组件
----------------------------------------------------
错的：
<ul>
<Item/>
<Item/>
<Item/>
<Item/>
</ul>
对的：
arr.push(<Item/>);
arr.push(<Item/>);
arr.push(<Item/>);
arr.push(<Item/>);
...
<ul>
{arr}
</ul>
