React笔记

*****************************************************************************************
react笔记


1、 ReactJsx知识点
a、react标签里面如果要使用JSX添加自定义属性，需要添加前缀[data-]
b、reactJSX中使用javascript表达式，表达式需要写在花括号{}里
c、reactJSX中不能使用if else语句，但是可以使用三元运算符
d、react推荐使用内联样式
【eg】
var myStyle = {
fontSize: 100, // -- JSX会自动添加px单位
color: '#FF0000'
};
ReactDOM.render(
<h1 style = {myStyle}>菜鸟教程</h1>,
document.getElementById('example')
); 
e、reactJSX允许在模板中插入数组，数组会自动展开所有成员
f、reactJSX渲染html标签的时候class->className ,for->htmlfor  为了养成良好习惯一般react组件命名以大写字母开头，html标签用小写字母开头。
2、 React State状态
【注意】 ： react 把组件看成一个状态集合，通过与用户的交互，实现不同的状态，渲染ui 保证用户界面跟数据保持一致
a、getInitialState 方法用于定义初始状态
b、调用setState方法重新渲染组件
3、 React Props属性
【注意】 ： 父子组件传值通过props
a、Props验证使用propTypes ,更多验证参考 http://www.runoob.com/react/react-props.html
【eg】
var title = "菜鸟教程";
var MyTitle = React.createClass({
  propTypes: {
title: React.PropTypes.string.isRequired,
  },
  render: function() {
return <h1> {this.props.title} </h1>;
   }
});
ReactDOM.render(
<MyTitle title={title} />,
document.getElementById('example')
);
4、 React组件api
a、设置状态 setState 
参数说明：nextState :将要设置的状态。callback 可选参数 回调函数，该函数会在setState设置成功且组件重新渲染成功之后调用
setState(object nextState[, function callback])
总会触发一次组件重绘，除非在shouldComponentUpdate()中实现一些条件的渲染逻辑
b、替换状态 replaceState
与setState方法不同的地方是：该方法只保留nextState中的状态，原state不在nextState中的状态中都会被删除。
c、设置属性 setProps
参数说明：nextProps，将要设置的新属性，该状态会和当前的props合并。callback，可选参数，回调函数。该函数会在setProps设置成功，且组件重新渲染后调用。
setProps(object nextProps[, function callback])
d、替换状态 replaceProps
与setProps方法不同的地方是：该方法会删除原有属性


****************************************************************************************************************