(0) React引入
<script type=‘text/javascript‘ src="react/react.js" charset="UTF-8"></script>
<script type=‘text/javascript‘ src="react/react-dom.js"></script>
<script type=‘text/javascript‘ src="react/JSXTransformer.js"></script>
<script type=‘text/javascript‘ src="react/ReactRouter.min.js"></script>
<script type="text/jsx">
// 我是代码
</script>
(1) Hello world React
var message = "hello world React";
// 创建虚拟dom
var vdom = <div>
{message}
</div>;
// 模板渲染
var reactApp = document.getElementById("reactApp");
ReactDOM.render(vdom,reactApp);
(2) ReactDOM.render()
ReactDOM.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点。
// 模板渲染
var reactApp = document.getElementById("reactApp");
RenderDoM.render(vdom,reactApp);
(3)JSX 语法
JSX 语法的好处 : 1、允许我们使用熟悉的语法来定义HTML元素树
2、程序结构更加语义化
3、提供更加语义化且易懂的标签
4、可以随时的掌控HTML标签
JSX 语法可以看成一种类HTML语法,其内可以HTML与JavaScript混写,对于“<”开头的,它会以html的规则进行解析,对于“{”开头的它会以JavaScript的规则进行解析;
(4)组件
React 允许将代码封装成组件,然后像插入普通 HTML 标签一样,在网页中插入这个组件。React.createClass 方法就用于生成一个组件类;
// 创建组件,(首字母必须大写)
var App = React.createClass({
render : function(){
var vd = <div></div>;
return vd;
}
})
// 引用 <App></App>
(5)getDefaultProps 为组件设置初始属性
getDefaultProps,每个组件只是调用一次
当然要个组件设置属性,也不是必须设置该方法
var MyTitle = React.createClass({
getDefaultProps : function(){
return {
title : "",
left : "",
right : ""
}
},
render : function(){
return (
// 此处必须用只能存在一个节点
<div>
<h1>{this.props.title}</h1>
<h2>{this.props.left}</h2>
<h3>{this.props.right}</h3>
</div>
);
}
})
// <MyTitle left="left" title="title" right="right"></MyTitle>
(6)属性,样式,类
<style>
.colorGreen{
color:green;
}
</style>
var MyImg = React.createClass({
render : function(){
var colorRed = {
color:"red"
}
return (
<div>
<img src="img/1.png" style={{"width":"100%"}}>
<p style={colorRed}>我是文本1</p>
<p className="colorGreen">我是文本2</p>
// jsx语法将html中的class变成了className
</div>
)
}
})
(7)事件
事件的使用有点像原生的js,唯一不同的是,react使用了驼峰命名的规则,对于原生的onclick,react则是onClick,事件的传参则是使用了bind函数;
var App = React.createClass({
render : function(){
return (
<div>
<button onClick={this.dealClick}>点击</button>
<button onClick={this.setVal.bind(this,20)}>事件传参</button>
</div>
)
},
dealClick : function(){
alert("1");
},
setVal : function(val){
alert(val);
}
})
(8)非DOM属性
1、key
2、ref
3、dangerouslySetInnerHTML
key : key是一个可选的唯一标识符,通过给组件设置一个独一无二的key,可以在渲染的时候智能的选择重新创建一个组件,还是重用一个组件从而提高渲染性能;
var App = React.createClass({
render : function(){
var list = [10,20,30];
var vd = <div>
<div>
{
// 循环渲染用map
list.map(function(item,index){
return <li key={index}>{item}</li>
})
}
</div>
</div>;
return vd;
}
})
ref : ref允许父组件在render方法外保持对子组件的引用
var MyComponent = React.createClass({
render : function(){
return (
<div>
<input type="text" ref="inputText" />
<input type="button" value="点击" onClick={this.dealClick}/>
</div>
)
},
dealClick : function(){
// 获取输入框的值
console.log(this.refs.inputText.value);
}
})
dangerouslySetInnerHTML : 设置原始的HTML
var MyHTML = React.createClass({
render : function(){
var content = "<ul><li>A</li><li>B</li><li>C</li><li>D</li></ul>";
var vd = <div>
<h3>Hello</h3>
<p>{content}</p>
<p dangerouslySetInnerHTML={{__html:content}}></p>
</div>;
return vd;
}
})
(9)this.props.children
this.props 对象的属性与组件的属性一一对应,但是有一个例外,就是 this.props.children 属性。它表示组件的所有子节点
// -- > 当前组件没有子节点, this.props.children = undefined
// -- > 有一个子节点, this.props.children = object
// -- > 有多个子节点, this.props.children = array
React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点,而不用担心 this.props.children 的数据类型是 undefined 还是 object;
var NotesList = React.createClass({
render : function(){
return (
<ol>
{
React.Children.map(this.props.children,function(item){
return (<li>{item}</li>);
})
}
</ol>
)
}
})
var App = React.createClass({
render : function(){
var vd = <div>
<h3>Hello</h3>
<NotesList>
<span>Hello</span>
<span>World</span>
</NotesList>
</div>;
return vd;
}
})
(10)this.state
React 不操作DOM,只更新数据,通过数据的更新来重新渲染
getInitialState 方法用于定义初始状态,也就是一个对象,这个对象可以通过 this.state 属性读取。当用户点击组件,导致状态变化,this.setState 方法就修改状态值,每次修改以后,自动调用 this.render 方法,再次渲染组件;
var Cart = React.createClass({
getInitialState : function(){
// 设置初始状态
return {
isShow : false
}
},
render : function(){
return (
<div>
<button onClick={this.dealClick}>购物车</button>
{this.state.isShow &&
<ul>
<li>伊利谷粒多</li>
<li>营养快线</li>
<li>可乐</li>
</ul>
}
</div>
)
},
dealClick : function(){
// 设置state 中的isShow
this.setState({
isShow : !this.state.isShow
})
}
})
(11)表单
下面代码中,文本输入框的值,不能用 this.props.value 读取,而要定义一个 onChange 事件的回调函数,通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况;
var Input = React.createClass({
getInitialState : function(){
return {
value : ""
}
},
render : function(){
var value = this.state.value;
return (
<div>
<input value={value} type="text" onChange={this.dealChange} />
<p>{value}</p>
</div>
)
},
dealChange : function(event){
this.setState({
value : event.target.value
})
}
})
(12)组件的生命周期(理论性的知识,建议看书理解)
组件的生命周期分成三个状态:
1、实例化(会调用的方法)
getDefaultProps
getInitialState
componentWillMount
render
componentDidMount
后续运用:
getInitialState
componentWillMount
render
componentDidMount
2、存在期
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
3、销毁 && 清理期
componentWillUpdate
(13)Ajax
组件的数据来源,通常是通过 Ajax 请求从服务器获取,可以使用 componentDidMount 方法设置 Ajax 请求,等到请求成功,再用 this.setState 方法重新渲染 UI;
var GetList = React.createClass({
getInitialState : function(){
return {
list : []
}
},
componentDidMount : function(){
var url = "1.json";
$.getJSON(url,{},function(res){
this.setState({
list : res.data
});
}.bind(this));
// 此处的bind是为了解决闭包问题;
},
render : function(){
var list = this.state.list;
return (
<div>
{
this.state.list.map(function(item,index){
return (
<li>{item.name}</li>
)
})
}
</div>
)
}
})
(14)路由
1、导入路由组件,并引入其中的变量
//Router 路由管理
// Route 路由
// IndexRoute 主路由
// Link 链接
// IndexLink 主链接
var {Router,Route,IndexRoute,IndexLink,Link} = ReactRouter;
2 、创建用于切换的界面
var Wechat = React.createClass({
render : function(){
var vd = <div>
WeChat
<p><Link to="/chat/100">小花</Link></p>
<p><Link to="/chat/200">小喵</Link></p>
</div>;
return vd;
}
})
var Contact = React.createClass({
render : function(){
var vd = <div>
Contact
</div>;
return vd;
}
})
var DisCover = React.createClass({
render : function(){
var vd = <div>
DisCover
</div>;
return vd;
}
})
var MyInfo = React.createClass({
render : function(){
var vd = <div>
MyInfo
</div>;
return vd;
}
})
var Chat = React.createClass({
render : function(){
var vd = <div>
Chat
<p>id={this.props.params.id}</p>
//获取通过路由传递的参数
</div>;
return vd;
}
})
// 创建导航栏组件
var Navigation = React.createClass({
getDefaultProps : function(){
return {
left:"",
title:"",
right:""
}
},
render : function(){
var navStyle = {
width:"100%",
height:"44px",
backgroundColor:"#666",
borderBottom:"1px solid #ccc",
textAlign:"center",
lineHeight:"44px",
color:"#fff"
}
var leftStyle = {
float:"left",
width:"15%",
height:"100%",
}
var titleStyle = {
float:"left",
width:"70%",
height:"100%",
}
var rightStyle = {
float:"left",
width:"15%",
height:"100%",
}
var vd = <div style={navStyle}>
<div style={leftStyle}>{this.props.left}</div>
<div style={titleStyle}>{this.props.title}</div>
<div style={rightStyle}>{this.props.right}</div>
</div>;
return vd;
}
})
// 创建底部导航组件
var Footer = React.createClass({
render : function(){
var navStyle = {
position:"fixed",
bottom:"0",
left:"0",
width:"100%",
height:"58px",
background:"#f1f1f1"
}
var navItemStyle = {
display:"block",
float:"left",
width:"25%",
height:"58px",
lineHeight:"58px",
textAlign:"center",
color:"#666",
textDecoration:"none"
}
var vd = <div style={navStyle}>
<IndexLink activeStyle={{"color":"red"}} style={navItemStyle} to="/Wechat">Wechat</IndexLink>
<IndexLink style={navItemStyle} to="/Contact">Contact</IndexLink>
<IndexLink style={navItemStyle} to="/DisCover">DisCover</IndexLink>
<IndexLink style={navItemStyle} to="/MyInfo">MyInfo</IndexLink>
</div>;
return vd
}
})
// 创建组件
var App = React.createClass({
render : function(){
var contentStyle = {
minWidth:"320px",
maxWidth:"640px",
margin:"0 auto 48px",
padding:"10px"
}
var vd = <div>
<div>
<Navigation left="" right="" title="weChat"></Navigation>
</div>
<div style={contentStyle}>
{this.props.children}
</div>
<div>
<Footer></Footer>
</div>
</div>;
return vd;
}
})
// 创建虚拟dom
var vdom = <Router>
<Route path="/" component={App}>
<IndexRoute component={Wechat} />
<Route path="/Wechat" component={Wechat} />
<Route path="/Contact" component={Contact} />
<Route path="/DisCover" component={DisCover} />
<Route path="/MyInfo" component={MyInfo} />
<Route path="/Chat/:id" component={Chat} />
</Route>
</Router>
//render
var reactApp = document.getElementById("reactApp");
ReactDOM.render(vdom,reactApp);