标签：export from 方便 object next stat 默认 component 学习
react这个东西，说实话，我刚刚接触一个月不到。感觉这玩意很颠覆我以前的前端开发
比方说，可能，整个项目，并没有一个html文件
比方说，以前我们写前端代码，分的清清楚楚，html里面就是放dom，css里面放样式，js里面放逻辑处理
比方说...
手里头正好在写一个项目，也顺带着看着书，就稍微记一点自己的理解
我觉得这个是react的核心了哇
以前也写组件，毕竟是加快开发的东西，就像雕版印刷最后发展到活字印刷的必然性。组件也是必然的。
可复用很重要，一个项目，甚至多个项目，肯定会有很类似的东西，他们往往只是某部分不同，差不多就这个意思，把不同的地方搞成个变量，恩，差不多就这样理解挺方便的
下面研究下react的组件
/**
* @file
* @author fengying
*/
import React, { PureComponent, PropTypes } from ‘react‘;
import styles from ‘./boxTitle.less‘;
export default class boxTitle extends PureComponent {
// 定义参数的类型以及是否为必须的,如果这边不是必须就要在defaultProps里面
static propTypes = {
title: PropTypes.string,
icon: PropTypes.bool.isRequired,
}
// 定义非必要的参数的默认值
static defaultProps = {
title: ‘‘,
}
// 构造函数，定义默认的state
constructor(props) {
super(props);
this.state = {
};
}
// 在render()方法执行前执行，只执行一次
componentWillMount() {
}
// 在render()方法执行后执行，只执行一次
componentDidMount() {
}
// 当组件传入的 props 发生变化时调用，例如：父组件状态改变，给子组件传入了新的prop值。用于组件 props 变化后，更新state。
componentWillReceiveProps(nextProps) {
// this.setState({ });
}
// 接受需要更新的props和state，让开发者增加必要的条件判断，让其在需要时更新，不需要时不更新，当方法返回false时，组件不再向下执行生命周期方法
shouldComponentUpdate(nextProps, nextState) {
}
// 重新渲染组件刷新前
componentWillUpdate() {
}
// 重新渲染组件刷新后
componentDidUpdate() {
}
// 组件销毁前（事件回收或者清除定时器等方法）
componentWillUnmount() {
}
render() {
const { title， icon } = this.props;
return (
<div className={styles.title}>
{
icon ？ <span className={styles.tip} /> ： ‘‘
}
{title}
</div>
);
}
}
这个是项目里一个小标题
基本上可以作为一个模板，当然有些方法没用到的，可以删了
生命周期三个状态：
状态的处理函数：
特殊的处理函数：
render里面return的html，用{}包围起来写js代码
state改变，页面会重新渲染
标签：export from 方便 object next stat 默认 component 学习
原文地址：http://www.cnblogs.com/fengyingYZ/p/6899521.html
