*通过createElement创建元素 HELLO Word
var el=React.createElement(type,[props],[children...]) 标签 属性 内容
React.render(el,document.getElementById("..."))
*虚拟DOM
在虚拟DOM上操作 通过render来挂载到真实的DOM
组件
React.createClass(meta)
内部需要render函数
*JSX
JSX是对JavaScript语法的扩展，它让我们可以在JavaScript代码中以类似HTML 的方式创建React元素。
var Jsxdemo=React.createClass({
render:function(){
var html=
return html;
}
JSX 能让我们像是拼写字符串一样去写HTML、
*props
props 称之为 无状态组件 组件的表现都是通过外部传入的props属性 根据自身的状态来做出不同的反应
var Jsxdemo=React.createClass({
render:function(){
var number=this.props.setid;
alert(number); 这里能直接输出对象里的汉字
var style={
"color":"red",
"fontSize":"12px"//这里是要求内联样式需要按照驼峰写法去写
}
var html=
return html;
}
});
ReactDOM.render(*内联样式
var Jsxdemo=React.createClass({
render:function(){
var style={
"color":"red",
"fontSize":"12px"//这里是要求内联样式需要按照驼峰写法去写
}
var html=
return html;
}
});
*state 状态机
state - 组件的状态变量 保存组件的当前状态，可以再任何时候通过this.state来获取到当前状态
getInitialState() - 设置组件初始状态
setState(currentState) - 设置组件当前状态 会重新渲染
//getInitialState方法来设置初始化状态 也就是设置我们的 state {key:value} 其中key代表state指向的状态变量 value代表状态
getInitialState : function(){
return {open : true};
},
//这里是通过一个点击事件来重新设定状态机 必须要通过this.setState({option:!this.state.open}) 意思就是设置状态机的另一种状态
onClick : function(){
//读取并重设状态，这将触发重新渲染
this.setState({open : !this.state.open});
},
//在render来操控我们的虚拟DOM 记得return HTML代码
render : function(){
//根据状态设置样式
img = this.state.open ? "img/switch-on.png" : img = "img/switch-off.png";
//返回元素
return 
;
}
- 生命周期
componentWillMount() - 组件实例即将挂接（初次渲染）时被调用
这个方法在整个生命周期中只会被调用一次。
componentDidMount() - 组件实例挂接（初次渲染）后被调用
这个方法在整个生命周期中只会被调用一次。
componentWillReceiveProps(nextProps) - 组件实例即将设置新属性时被调用
参数nextProps表示即将应用到组件实例上的新属性值。
这个方法在初次渲染时不会被调用。在此方法内调用setState()不会引起重新渲染。
shouldComponentUpdate(nextProps, nextState) - 组件实例即将重新渲染时被调用
参数nextProps传入即将应用到组件实例上的新属性值，参数nextState传入组件实例即将被 设置的状态值。如果这个方法返回false，那么组件实例就不会被重新渲染。除非我们明确地 知道，新的属性和状态不需要进行重新渲染，否则这个方法都应该返回true。
这个方法在初次渲染时或通过forceUpdate()方法进行渲染时不会被调用。
componentWillUpdate(nextProps, nextState) - 组件实例即将重新渲染时被调用
这个方法在初次渲染时不会被调用。注意：不能在此方法内调用setState()。
componentDidUpdate(prevProps, prevState) - 组件实例重新渲染后被调用
这个方法在初次渲染时不会被调用。
componentWillUnmount() - 组件实例即将从DOM树移除时被调用
这个方法在整个生命周期中只会被调用一次。
(访问DOM v0.14 版中 refs 指向的就是 DOM 节点，同时也会保留 .getDOMNode() 方法（带 warning），最终在 v0.15 版中去除该方法。)
首先要给你想获得DOM对象设定 ref=“q” ref 必须是全局唯一的
var el = React.findDOMNode(this.refs.q),
this.refs.q获取到的是虚拟DOM，在render方法执行之后，并且react已经完成了DOM的更新，才能通过 this.refs.city.getDOMNode() 来拿到原生的DOM元素。
使用 this.refs.xxx.getDOMNode() 或React.findDOMNode(this.refs.xxx) 可以获取到真正的 DOM 节点。
// 之前：
// var input = this.refs.giraffe.getDOMNode();
//
// v0.14 版：0.15版本以后
var input = this.refs.giraffe;
alert(input.value);
*表单
文本输入框
不要使用value属性设置文本输入框元素的初值，应当使用defaultValue：
//JSX
复选按钮
不要使用checked属性设置复选按钮的初始选中状态，应当使用defaultChecked：
//JSX
单选按钮组
不要使用option元素的selected属性设置单选按钮组的初始选中状态，应当使用 select元素的defaultValue：
//JSX
*容器组件
在ReactDOM.render里面 ，组件要成双标签 {this.props.children}用于获取到我们的React的 子元素
ReactDOM.render(
var Jsxdemo=React.createClass({
componentDidMount:function(){
var message=this.refs.bbbb;
// alert(message.value);
},
render:function(){
var number=this.props.setid;
// alert(number);
var style={
"color":"red",
"fontSize":"12px"//这里是要求内联样式需要按照驼峰写法去写
}
var html=
return html;
}
});
ReactDOM.render(我是容器组件 ,document.getElementById("jsxdemobox"));
*JSX可展开属性
我们可以再render里面
相等于
var props ={
className :"ez-slider",
onMouseDown :this.onMouseDown,
onMouseUp :this.onMouseUp,
onMouseMove :this.onMouseMove
};
//传入属性包
var rel =
var Jsxdemo=React.createClass({
// getInitialState:function(){
// },
componentDidMount:function(){
var message=this.refs.bbbb;
// alert(message.value);
},
onClick:function(){
alert(0);
},
render:function(){
var number=this.props.setid;
// alert(number);
var style={
"color":"red",
"fontSize":"12px"//这里是要求内联样式需要按照驼峰写法去写
}
var options={
className:"ez-led",
onClick:this.onClick
}
var newhtml=22222;
return newhtml;
}
});
ReactDOM.render(我是容器组件 ,document.getElementById("jsxdemobox"));
动画 CSS3 transition 思路就是利用状态机来判断 DOM状态
为元素声明transition样式
设置属性初始值，第一次渲染元素
设置属性目标值，第二次渲染元素
*默认属性
getDefaultProps:是设置默认属性 红色为相关代码
如果设置了value 则 弹出 10 如果没有设置 则 弹出 20
var ZZ=React.createClass({
getDefaultProps:function(){
return {
value:20
}
},
onClick:function(){
alert(0);
},
render:function(){
alert(this.props.value);
var option={
className:"maincsss",
onClick:this.onClick
}
var html=111111;
return html;
}
});
ReactDOM.render(varEzLoggerMixin={
log:function(){
//sth. happened here.
}
};
React.createClass({
mixins:[EzLoggerMixin],
render:function(){
//your render stuff.
}
});
//mixin就是存放公共能力的一个简单的对象而已。首字母可不大写 但是为了养成习惯 首字母还是大写的好 哦
var Minxintext={
log:function(){
alert("我是mixin");
}
};
mixins : [Minxintext],
然后在React实例里面的生命周期或者事件函数里面 通过 this. 你定义的mixin对象内部的函数
var Minxintext={
log:function(){
alert("我是mixin");
}
};
var ZZ=React.createClass({
mixins : [Minxintext],
getDefaultProps:function(){
return {
value:20
}
},
onClick:function(){
this.log();
},
render:function(){
// alert(this.props.value);
var option={
className:"maincsss",
onClick:this.onClick
}
var html=
return html;
}
});
ReactDOM.render(
map 循环
return (
{
datas.map(function(i){
return 我是{i.name}a a a ;
})
}
)