React入门实例
Tags:React
- React介绍
- JSX语法
- 组件
- props
- state
React介绍
React 一个由Facebook开源的构建用户界面的Javascript库，相当于MVC中的View层
React特点：
- 声明式设计 −React采用声明范式，可以轻松描述应用。
- 高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
- 灵活 −React可以与已知的库或框架很好地配合。
- JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
- 组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
- 单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
React网页模板：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<!-- react核心库 -->
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<!-- react 提供与DOM相关功能 -->
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<!-- 将ES6预发转换为ES5语法，将JSX语法转换为Javascript语法，较好性能，一般在服务端完成此操作 -->
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<!-- 注意点：type属性值要设置为text/babel -->
<script type="text/babel">
</script>
</body>
</html>
JSX语法
JSX是Javascript的拓展语法糖，在React中替代Javascript
JSX特点：
- JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
- 类型安全，在编译过程中就能发现错误。
- 使用 JSX编写模板更加简单快速。
ReactDOM.render((
<div>
<p>
ReactDOM.render 是React的基本方法，用于将JSX模板转换为Html语言，并插入到指定节点中
</p>
<p>
ReactDOM.render 有三个参数：
<ul>
<li>
第一个参数：要渲染的的ReactElement，只能有一个根节点
</li>
<li>
第二个参数：容器，组件渲染结果在DOM中要插入的未知
</li>
<li>
第三个参数：回调函数，可选。传入该值时，会在组件渲染完或更新完成后调用
</li>
</ul>
</p>
</div>),document.getElementById('example'));
JSX表达式
var a=1;
ReactDOM.render((
<p>
{a==1?'true':'false'}
</p>
),document.getElementById('example'));
样式
var style1={
lineHeight:'32px',
fontWeight:'bolder',
border:'1px solid red'
};
ReactDOM.render((
<div>
<p className='normal'>
选择器样式：注意：此处使用className的值来指定P标签的class样式，原因 class是React中的关键字
</p>
<p style={style1}>
对象样式:通过一个对象来实现，该对象的内容即CSS对象的属性和值
注意：
1.单个单词的 CSS 属性（比如 padding, margin, color）保持不变。
2.带有短横线的多个单词的 CSS 属性（比如 background-color, font-family, border-radius）变成去掉横线，并且第二个单词的首字母大写的驼峰规则命名的单词，即backgroundColor，fontFamily,boredrRadius
</p>
<p style={{ lineHeight:'32px',fontWeight:'bolder',border:'1px solid red' }}>
内联样式
</p>
</div>
),document.getElementById('example'));
数组
var arr = [
<h1>
JSX 允许在模板中插入数组，数组会自动展开所有成员
</h1>,
<h2>
我是数组的一个内容项
</h2>
];
ReactDOM.render((
<div>
{arr}
</div>
), document.getElementById('example'));
组件
React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件
注意点：
- React中创建的组件类以大写字母开头，驼峰命名法，
- 在React中使用React.createClass方法创建一个组件类
- 每个组件类都必须实现自己的render方法。输出定义好的组件模板。返回值：null、false、组件模板
- 组件类只能包含一个顶层标签
var HelloMessage = React.createClass({
render: function () {
return <h1>Hello World！</h1>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
HTML标签与React组件
React即可以渲染HTML标签，也可以渲染React组件。
JSX语法约定了分别使用首字母大小写，来区分本地组的类和HTML标签：
- HTML标签，标签名以小写字母开头
- React组件，标签名以大写字母开头
var myDivElement = <div className="foo" >渲染普通html标签</div>;
React.render(myDivElement, document.getElementById('example'));
var MyComponent = React.createClass({
render:function() {
return (
<div>
渲染React组件，React.createClass创建了一个组件
</div>
);
}
});
ReactDOM.render(<MyComponent />, document.getElementById('example'));
复合组件
var WebSite = React.createClass({
render: function() {
return (
<div>
<Name name={this.props.name} />
<Link site={this.props.site} />
</div>
);
}
});
var Name = React.createClass({
render: function() {
return (
<h1>{this.props.name}</h1>
);
}
});
var Link = React.createClass({
render: function() {
return (
<a href={this.props.site}>
{this.props.site}
</a>
);
}
});
ReactDOM.render(
<WebSite name="菜鸟教程" site=" http://www.runoob.com" />,
document.getElementById('example')
);
props
props 负责给组件传值，给组件设置的属性，都会存储在this.props对象中，this.props对象的属性跟组件的属性是一一对应
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name="Runoob" />,
document.getElementById('example')
...this.props
能够将父组件所有的属性都复制给子组件
var Link = React.createClass({
render: function () {
return <a {...this.props}>{this.props.name}</a>
}
});
ReactDOM.render(
<Link href="http://www.baidu.com" name="百度搜索" />,
document.getElementById("example")
);
this.props.children
这是一个例外，不跟组件属性对应，标识组件的所有子节点
在组件内容不确定是使用，在子组件中需要使用React.Children.map方法遍历所有子节点项
var ListComponent = React.createClass({
render: function () {
return (
<ul>
{
React.Children.map(this.props.children, function (child) {
// child是遍历得到的父组件的子节点
return <li>{child}</li>
})
}
</ul>
);
}
});
ReactDOM.render(
(
<ListComponent>
<h1>子节点1</h1>
<p>子节点2</p>
<div>子节点3</div>
</ListComponent>
),
document.getElementById("example")
);
组件默认属性
var HelloMessage = React.createClass({
getDefaultProps: function () {
return {
name: 'React'
};
},
render: function () {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
props 验证
用于验证组件实例的属性是否符合要求
var title = "props验证测试";
// var title = 123;
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
},
render: function () {
return <h1> {this.props.title} </h1>;
}
});
ReactDOM.render(
<MyTitle title={title} />,
document.getElementById('example')
);
state
React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
当state发生变化时，会调用组件内部的render方法
var CheckButton = React.createClass({
// 定义初识状态
getInitialState: function () {
return {
// 在这个对象中设置的属性，将会存储在state中
// 默认状态，未选中
isCheck: false
}
},
// 定义事件绑定的方法
handleChange: function () {
// 修改状态值，通过this.state读取设置的状态值
this.setState({
isCheck: !this.state.isCheck
});
},
render: function () {
// 根据状态值，设置显示的文字
// 在JSX语法中，不能直接使用if，使用三目运算符
var text = this.state.isCheck ? "已选中" : "未选中";
return (
<div>
<input type="checkbox" onChange={this.handleChange} />
{text}
</div>
);
}
});
ReactDOM.render(
<CheckButton />,
document.getElementById("example")
);
var Input = React.createClass({
getInitialState: function () {
return {
value: "请输入"
};
},
handleChange: function (event) {
// 通过event.target.value读取用户输入的值
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")
);