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">
// ** Our code goes here! **
</script>
</body>
</html>
React 开发用到的库有：
- react.js 是React 的核心库
- react-dom.js 是提供与DOM相关的功能
- Browser.js 的作用是将JSX语法转为JavaScript语法。
React 的基本语法：
React 对象：是React库的入口。
下面是一些常见的API:
createElement:定义一个虚拟dom
React.createElement(参数一，参数二，参数三);
- 参数一：表示虚拟dom的名称（可以是任意元素的名称，也可以是一个组件的名称）
- 参数二：表示虚拟dom的一些必要的属性（比如：id, className, title等）
- 参数三：表示虚拟dom的子元素 （若是文本节点，可以直接书写，不必书写createElement）
var ul = React.createElement(
'ul',
null,
React.createElement('li', null, '男士'),
React.createElement('li', null, '女士')
)
React.createClass:创建一个组件类
React.createClass({对象});
- 参数是一个对象，对象的属性或方法是对组件的说明。
- 有个必要方法render：将虚拟dom树输出
- 组件类的名字第一个字母必须大写。
- 组件类只能包含一个顶层标签，否则也会报错。
var Uls = React.createClass({
render: function(){
return(
<ul>
<li>男装</li>
<li>女装</li>
</ul>
)
}
});
ReactDOM.render(<Uls><Uls>, document.getElementById('example'));
ReactDom对象: 操作dom
ReactDOM.render 方法: 是将虚拟dom渲染到页面
ReactDom.render(参数一，参数二，参数三);
- 第一个参数：表示虚拟dom
- 第二个参数：表示真实dom容器元素
- 第三个参数：表示一个回调函数
其他语法
JSX中插值
插值：向虚拟DOM中动态的插值(可以插入元素内容中，也可以插入元素属性中)
语法：大括号{}
var Header = React.createClass({
render: function(){
var name = 'Jack';
var oDate = new Date();
return (
<div>
<span>{name}</span>
<span>{oDate.getHours() > 12 ? '下午好':'上午好'}</span>
</div>
);
}
});
ReactDOM.render(<Header></Header>,document.getElementById('example'));
注意点：
- JSX中 不能使用if else语句，但是可以使用三元运算表达式来代替。
- JSX中 注释需要写在花括号中。
列表渲染
JSX 遇到数组，会自动展开所有成员
var List = React.createClass({
createLi: function() {
var arr = ['苹果’, '梨', '橘子'];
return arr.map(function(index, value){
return (<li>{value}</li>);
});
},
render: function() {
return (
<ul>{this.createLis()}</ul>
);
}
});
React.render(<List></List>, document.getElementById('example'));
两个描述性的属性
Props 属性：
props 是在组件创建时候提供的，往往是不会更改的。
获取属性：this.props
设置默认属性：getDefaultProps
var List = React.createClass({
getDefaultProps: function() {
return {
titleData: ['默认标题']
};
},
getTitle: function(){
return this.props.titleData.map(function(value, index){
return (
<li key={index}>{value}</li>
);
});
},
render: function(){
return (
<ul>{this.getTitle()}</ul>
);
}
});
ReactDOM.render(<List titleData={['北京','天津']}></List>, document.getElementById('example'));
State状态，
组件内部维护的一个数据，通常在组件发生交互时候发生改变。
获取属性：this.state
设置默认属性：getInitialState
改变状态：this.setState
var Nav =React.createClass({
changeNav: function() {
this.setState({
num: this.state.num+1
});
},
getInitialState: function(){
return {
num : 0
}
},
render: function(){
return (
<div>
<ul>
<li style={{display: this.state.num % 3 == 0 ? 'block' : 'none'}}>111 111 111</li>
<li style={{display: this.state.num % 3 == 1 ? 'block' : 'none'}}>222 222 222</li>
<li style={{display: this.state.num % 3 == 2 ? 'block' : 'none'}}>333 333 333</li>
</ul>
<span onClick={this.changeNav}>换一换</span>
</div>
);
}
});
ReactDOM.render(<Nav></Nav>, document.getElementById('header'));
State 与 props 比较
相同点：在改变的时候，都会触发render函数
区别：props 是在组件创建时候提供的，往往是不会更改的；state 在组件发生交互的时候改变。
网友评论