准备工作
# 0、react核心库
<script src="../build/react.js"></script>
# 将JSX 语法转为 JavaScript
<script src="../build/JSXTransformer.js"></script>
1、react基本语法
<script type="text/jsx">
React.render(
<h1>react渲染一条内容</h1>,
document.getElementById('example')
);
</script>
2、一个简单的组件
- React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件；
- 【注意，组件类的第一个字母必须大写，否则会报错，比如HelloMessage不能写成helloMessage。】
<script type="text/jsx">
var HelloMessage = React.createClass({
render: function() {
return (
<p>我擦，这个是组件</p>
);
}
});
React.render(
<HelloMessage />,
document.getElementById('example')
);
</script>
3、组件的生命状态
- 组件的生命周期【挂载、更新、移除】
- getInitialState:是一个比较重要的方法，在组件挂载之前调用一次，可以用来定义初始化的数据，然后在后面调用
- getDefaultProps:
- 在组件类创建的时候调用一次，然后返回值被缓存下来。如果父组件没有指定 props 中的某个键，则此处返回的对象中的相应属性将会合并到 this.props （使用 in 检测属性）。
*【该方法在任何实例创建之前调用】，因此不能依赖于 this.props。另外，getDefaultProps() 返回的任何复杂对象将会在实例间共享，而不是每个实例拥有一份拷贝。
- componentWillMount【挂载】：
- 服务器端和客户端都只调用一次，在初始化渲染执行之前立刻调用。如果在这个方法内调用 setState，render() 将会感知到更新后的 state，将会执行仅一次，尽管 state 改变了。
- componentDidMount【挂载】：
- 在初始化渲染执行之后立刻调用一次，仅客户端有效（服务器端不会调用）。在生命周期中的这个时间点，组件拥有一个 DOM 展现，你可以通过 this.findDOMNode() 来获取相应 DOM 节点。
- 如果想和其它 JavaScript 框架集成，使用 setTimeout 或者 setInterval 来设置定时器，或者发送 AJAX 请求，可以在该方法中执行这些操作。
<script type="text/jsx">
var HelloMessage = React.createClass({
getInitialState:function(){
// this.state={};
console.log("在组件挂载之前调用一次。返回值将会作为 this.state 的初始值。");
return {data : "haha"};
},
getDefaultProps:function(){console.log("")},
componentWillMount:function(){console.log(1)},
componentDidMount:function(){console.log(2)},
// [更新的时候调用]
componentWillReceiveProps:function(){console.log(3)},
shouldComponentUpdate:function(){console.log(4)},
componentWillUpdate:function(){console.log(5)},
componentDidUpdate:function(){console.log(6)},
// 移除的时候调用
componentWillUnmount:function(){console.log(7)},
render: function() {
return (
<p>我擦，这个是组件{this.state.data}</p>
);
}
});
React.render(
<HelloMessage />,
document.getElementById('example')
);
</script>
4、事件处理
- react的事件支持有点像是传统的事件绑定方法，通过onClick等绑定事件;
数据的变化可以通过state的变量变【用this.setState方法】，也可以通过全局变量变
<script type="text/jsx">
var i=0;
var HelloMessage = React.createClass({
getInitialState:function(){
console.log("在组件挂载之前调用一次。返回值将会作为 this.state 的初始值。");
return {data : "haha"};
},
handClick:function(){
++i;
this.setState({data : "点击了"+i})
},
render: function() {
return (
<p onClick={this.handClick}>我擦，这个是组件,可点击-----{this.state.data}</p>
);
}
});
React.render(
<HelloMessage />,
document.getElementById('example')
);
</script>
5、DOM操作
- React.findDOMNode(component)获取到组件中真实的DOM;
- react可以允许我们通过 ref 来定位一个组件。具体的做法是：先给一个组件设置一个 ref=‘xxx’ 的属性，注意这个ref必须是全局唯一的。
<input ref='myTextInput' />然后就可以通过 this.refs.myTextInput 来访问这个组件。【不过，这里拿到的只是虚拟DOM，而不是真实的DOM。】
- 获取DOM主要是为了用第三方的插件来实现我们的功能，如jQuery。
<script type="text/jsx">
var MyComponent = React.createClass({
handleClick: function() {
// Explicitly focus the text input using the raw DOM API.
React.findDOMNode(this.refs.myTextInput).focus();
},
render: function() {
// The ref attribute adds a reference to the component to
// this.refs when the component is mounted.
return (
<div>
<input type="text" ref="myTextInput" />
<input
type="button"
value="Focus the text input"
onClick={this.handleClick}
/>
</div>
);
}
});
React.render(
<MyComponent />,
document.getElementById('example')
);
</script>
6、组件组合使用
- 复合组件必须有一个，而且只能有一个父节点;如Box组件
- 复合组件添加方法如
<script type="text/jsx">
var ComDemo1=React.createClass({
render: function() {
return (<p>哈哈哈，组件</p> );
}
});
var ComDemo2=React.createClass({
render: function() {
return (<p>哈哈哈，组件2</p> );
}
});
var Box=React.createClass({
render: function() {
return (
<div>
<ComDemo1 /><ComDemo2 />
</div>
);
}
});
React.render(
<Box />,
document.getElementById('example')
);
</script>
7、组件之间的数据传递
- 组件之间之间的组合使用的时候，this.state和this.props是很重要的一些东西
- 这个demo的数据的交换通过父亲Box组件来实现
- comment_txt，data都是用来绑定子节点的一些方法
- 类似input这种非成对标签，需要"/"结尾如
"<input type="text" ref="input_txt" />"
- this.refs用来绑定获取真实的dom节点
- this.props.data.map遍历父元素传过来的数据
- this.setState({list:this.state.list})重新设计数据，会自动刷新
<script type="text/jsx">
var BoxInput=React.createClass({
btn_sub:function(){
var txts=this.refs.input_txt.getDOMNode().value.trim();
this.props.comment_txt(txts);
this.refs.input_txt.getDOMNode().value = '';
},
render: function() {
return (
<div className="inp">
<input type="text" ref="input_txt" />
<input type="button" value="添加" onClick={this.btn_sub} />
</div>
);
}
});
var BoxShow=React.createClass({
render: function() {
var com_lsit=this.props.data.map(function ( comment,index ){
return(<li>{index+1}、{comment}</li> )
});
return (
<ul> {com_lsit} </ul>
);
}
});
var Box=React.createClass({
getInitialState:function(){
return{
list:["第一","XD"]
}
},
surper_comment_txt:function(comment){
// console.log("传过来的东西："+comment);
this.state.list.push(comment);
console.log(this.state.list);
this.setState({list:this.state.list})
},
render: function() {
// comment_txt，data都是用来绑定子节点的一些方法
return (
<div>
<BoxInput comment_txt={this.surper_comment_txt} />
<BoxShow data={this.state.list} />
</div>
);
}
});
React.render(
<Box />,
document.getElementById('example')
);
</script>
8、Mixins
- mixins是用来做方法复用的，
- 使用方法：mixins:[SetIntervalMixin],
- note：使用 ES6 class 定义的组件已经不支持 mixin 了，因为使用 mixin 的场景都可以用组合组件这种模式来做到
<script type="text/jsx">
var SetIntervalMixin = {
fn1:function(){console.log("我是方法1") },
fn2:function(){console.log("我是方法2") },
fn3:function(){console.log("我是方法3") }
};
var ComDemo1=React.createClass({
mixins:[SetIntervalMixin],
getInitialState:function(){
this.fn1();
return{};
},
render: function() {
return (<p>哈哈哈，组件</p> );
}
});
var ComDemo2=React.createClass({
mixins:[SetIntervalMixin],
getInitialState:function(){
this.fn2();
return{};
},
render: function() {
return (<p>哈哈哈，组件2</p> );
}
});
var ComDemo0=React.createClass({
render: function() {
return (
<div><ComDemo2 /><ComDemo1 /></div>
);
}
});
React.render(
<ComDemo0 />,
document.getElementById('example')
);
</script>
9、其他
- Flux等还需要了解，练习
- 服务端渲染需要了解
- 动画等也没有了解
参考文章