1、css相关
react的css引用方式：
var styles = require(“./Category.css”);
import styles from “./Category.css”;
传统的方式是 <link type=”text/css” src=”./Category.css”>
组件的使用方式：
<div className={styles.entry}>test</div>
传统的方式是<div class=”entry”>test</div>
要使用两个类，className = {styles.entry+” “+styles.output}
想使用行内样式，就是这样的写法：
<div style={{background:”red”，
color:”#3c78FF”
}}>test</div>
或者
var styles = {
background: red;
color:#3c78FF;
}
<div style={styles}>test</div>
2、组件生命周期函数
Mounting：
getDefaultProps();
getInitialState();
componentWillMount();
render();
componentDid
Mount
();
Updating：
componentWillReceiveProps();
shouldComponentUpdate();
componentWillUpdate();
render();
componentDidUpdate();
3、react中常用的es6写法总结
模块部分
导入：
import “模块url”；
import 组件 from “组件模块url”；
导出：
export default class MyComponent extends Component{
//your coding
}
import MyComponent form “./MyComponent”;
定义组件部分
class MyComponent extends Component{
render() {
return (
<Image source={this.props.source} />
)
}
}
定义组件属性类型和默认属性
class MyComponent extends Component{
static defaultProps = {
autoPlay : false,
maxLoops : 10
}；
static propTypes = {
autoPlay: React.PropTypes.bool.isRequired,
maxLoops
:
React.PropTypes.number.isRequired
}；
render() {
//coding
}
}
初始化state
class video extends react.Component{
constructor (props){
super(props);
this.state = {
};
}
}
4、react的子组件向父组件传值，本质上就是把父组件的属性当作函数来处理
父组件：
<Content onClickEvent={this.handleClick.bind(this)}></Content>
子组件：
通过时间来调用this.props.onClickEvent(参数)；
代码方式为：
handleEvent() {
this.props.onClickEvent(参数)；
}
</div>