React.js基础
使用React渲染页面
<!DOCTYPE html>
<html>
<head>
<script src="build/react.js"></script><!--React核心库-->
<script src="build/react-dom.js"></script><!--提供与DOM操作相关-->
<script src="build/browser.min.js"></script><!--作用是将JSX语法转为JS语法，这一步很消耗时间，实际上线时，应放在服务器端完成-->
</head>
<body>
<div id="example"></div>
<script type="text/babel"> //JSX语法和JS不兼容，凡是使用JSX的地方，都要加上type="text/babel"
//ReactDOM.render方法用于将模板转为HTML语言，并指定插入的DOM节点
ReactDOM.render(
<h1>Hello,World!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>JSX语法（React特有的）
<!DOCTYPE html>
<html>
<head>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
//JSX语法，可以混写HTML和JS，map()方法遍历该数组
var names = ['kong','wang','fang'];
ReactDOM.render(
<div>
{
names.map(function(name){
return <div>Hello,{name}!</div>
})
}
</div>,
document.getElementById('example')
);
//JSX允许直接在模板插入JS变量，如果是一个数组，则会显示这个数组的所有成员
var arr = [<h1>Hello</h1>,<h2> World!</h2>];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
</script>
</body>
</html>组件
<!DOCTYPE html>
<html>
<head>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
//React.createClass方法用于生成一个组件类，所有组件类都必须有自己的render方法，用于输出组件，组件的第一个字母必须大写，另外，组件类只能包含一个顶层标签，否则会报错
var HelloMessage = React.createClass({
render : function(){
return <h1>Hello,{this.props.name}</h1>;
}
});
//可以在组件中加入任意属性，比如name，然后通过this.props对象获取
//注意class属性需要写成className，for属性需要写成htmlFor，因为class和for是JS的保留字
ReactDOM.render(
<HelloMessage name="John" />,
document.getElementById('example')
);
</script>
</body>
</html>this.props.children表示组件的所有子节点
<!DOCTYPE html>
<html>
<head>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
//this.props.children表示组件的所有子节点，它的值有三种可能，如果当前组件没有子节点，返回undefined，如果有一个子节点，返回数据类型为Object，如果有多个子节点，返回数据类型为Array
//React提供了一个方法React.Children来处理this.props.children，我们可以使用React.Children.map来遍历子节点
var NotesList = React.createClass({
render : function(){
return (
<ol>
{
React.Children.map(this.props.children,function(child){
return <li>{child}</li>;
})
}
</ol>
);
}
})
ReactDOM.render(
<NotesList>
<span>Hello,</span>
<span>World!</span>
</NotesList>,
document.getElementById('example')
);
</script>
</body>
</html>PropTypes组件的属性，值可以为字符串、对象、函数等，用于验证使用组件时，提供的参数是否符合要求
<!DOCTYPE html>
<html>
<head>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
//组件类的PropTypes属性，用来验证组件实例的属性是否符合要求，这里表示title属性必须，且类型为字符串
var MyTitle = React.createClass({
propTypes : {
title : React.PropTypes.string.isRequired
},
//使用getDefaultProps方法设置属性的默认值
getDefaultProps : function(){
return {
title : '我是title属性的默认值'
}
},
render : function(){
return <h1>{this.props.title}</h1>;
}
})
//title属性为数字类型，验证不通过，控制台会报错
var data = 123;
ReactDOM.render(
<MyTitle title={data} />,
document.getElementById('example')
);
</script>
</body>
</html>获取真实的DOM节点
组件并不是真实的DOM节点，而是存在于内存之中的一种数据结构，叫做虚拟DOM，只有当它插入文档以后，才会变成真实的DOM，根据React设计，所有的DOM变动，都先在虚拟DOM上发生，然后再将实际发生变动的部分，反映在真实的DOM上，这种算法叫做DOM DIFF，它可以极大提高网页的性能表现
获取真实的DOM，需要使用ref属性
<!DOCTYPE html>
<html>
<head>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
//使用ref属性获取真实节点，通过this.refs.xxx返回这个真实节点
var MyComponent = React.createClass({
handleClick : function(){
this.refs.myTextInput.focus();
},
render : function(){
return (
<div>
<input type="text" ref="myTextInput" />
<input type="button" value="Focus Button" onClick={this.handleClick} />
</div>
);
}
})
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
</script>
</body>
</html>this.state状态
<!DOCTYPE html>
<html>
<head>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
//使用getInitialState方法定义初始状态，也就是一个对象，可以通过this.state属性获取，当用户点击的时候，使用this.setState修改状态值，每次修改以后，自动调用this.render方法，再次渲染组件
//this.props和this.state都用于描述组件的特性，区别是，this.props表示一旦定义，就不再改变的属性，而this.state是会随着用户互动，发生变化的特性
var LikeButton = React.createClass({
getInitialState : function(){
return {liked : false};
},
handleClick : function(){
this.setState({liked : !this.state.liked});
},
render : function(){
var text = this.state.liked ? 'like' : 'not like';
return (
<p onClick={this.handleClick}>
You {text} this
</p>
);
}
})
ReactDOM.render(
<LikeButton />,
document.getElementById('example')
);
</script>
</body>
</html>表单
<!DOCTYPE html>
<html>
<head>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
//表单不能使用this.props读取，需要定义一个onChange事件的回调函数，通过event.target.value读取用户输入的值
var Input = React.createClass({
getInitialState : function(){
return {value : 'Hello'};
},
handleChange : function(event){
this.setState({value : event.target.value});
},
render : function(){
var value = this.state.value;
return (
<div>
<input type="text" value={value} onChange={this.handleChange} />
<p>{value}</p>
</div>
);
}
})
ReactDOM.render(
<Input />,
document.getElementById('example')
);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Input = React.createClass({
submitHandle : function(event){
event.preventDefault();
//getDOMNode()方法获取到真正的DOM节点
var helloTo = this.refs.helloTo.getDOMNode().value;
alert(helloTo);
},
render : function(){
return (
<form onSubmit={this.submitHandle}>
<input type="text" ref="helloTo" defaultValue="Hello World!" />
<input type="submit" value="提交" />
</form>
);
}
})
ReactDOM.render(
<Input />,
document.getElementById('example')
);
</script>
</body>
</html>
select表单应用
<!DOCTYPE html>
<html>
<head>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Input = React.createClass({
getInitialState : function(){
return {
options : ["B"]
};
},
changeHandle : function(event){
var checked = [];
var sel = event.target;
for(var i=0;i<sel.length;i++){
var option = sel.options[i];
if(option.selected){
checked.push(option.value);
}
}
this.setState({
options : checked
});
},
submitHandle : function(event){
event.preventDefault();
alert(this.state.options);
},
render : function(){
return (
<form onSubmit={this.submitHandle}>
//multiple="true"规定可同时选择多个选项
<select multiple="true" value={this.state.options} onChange={this.changeHandle}>
<option value="A">1</option>
<option value="B">2</option>
<option value="C">3</option>
</select>
<input type="submit" value="提交" />
</form>
);
}
})
ReactDOM.render(
<Input />,
document.getElementById('example')
);
</script>
</body>
</html>
多个表单元素与change处理器
方法一：使用bind绑定
<!DOCTYPE html>
<html>
<head>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Input = React.createClass({
getInitialState : function(){
return {
name : '',
age : ''
};
},
changeHandle : function(name,event){
var newState = {};
newState[name] = event.target.value;
this.setState(newState);
},
submitHandle : function(event){
event.preventDefault();
alert(this.state.name + this.state.age);
},
render : function(){
return (
<form onSubmit={this.submitHandle}>
<label htmlFor="name">name</label>
<input type="text" name="name" value={this.state.name} onChange={this.changeHandle.bind(this,'name')} />
<label htmlFor="age">age</label>
<input type="text" name="age" value={this.state.age} onChange={this.changeHandle.bind(this,'age')} />
<input type="submit" value="提交" />
</form>
);
}
})
ReactDOM.render(
<Input />,
document.getElementById('example')
);
</script>
</body>
</html>
方法二：使用event.target.name判断
<!DOCTYPE html>
<html>
<head>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Input = React.createClass({
getInitialState : function(){
return {
name : '',
age : ''
};
},
changeHandle : function(event){
var newState = {};
newState[event.target.name] = event.target.value;
this.setState(newState);
},
submitHandle : function(event){
event.preventDefault();
alert(this.state.name + this.state.age);
},
render : function(){
return (
<form onSubmit={this.submitHandle}>
<label htmlFor="name">name</label>
<input type="text" name="name" value={this.state.name} onChange={this.changeHandle} />
<label htmlFor="age">age</label>
<input type="text" name="age" value={this.state.age} onChange={this.changeHandle} />
<input type="submit" value="提交" />
</form>
);
}
})
ReactDOM.render(
<Input />,
document.getElementById('example')
);
</script>
</body>
</html>
参考链接：http://www.ruanyifeng.com/blog/2015/03/react.html