React基础
一、概念
官网：react中文文档
概念：用于构建用户界面的 JavaScript 库
二、JSX 简介
JSX是一种JavaScript的语法扩展，运用于React架构中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位，JSX就是用来声明React当中的元素，React使用JSX来描述用户界面。
例如：
const element = <h1>Hello, world!</h1>;
-
jsx的特定属性
可以通过使用引号，来将属性值指定为字符串字面量：
const element = <div tabIndex="0"></div>;
也可以使用大括号，来在属性值中插入一个 JavaScript 表达式：
const element = <img src={user.avatarUrl}></img>;
三、元素渲染
元素是构成 React 应用的最小砖块。
<body>
<div id="app"></div>
<script type="text/babel">
const user = {
message: 'react',
name: '小明',
age: 23
};
const templete = (
<div>
<h2>这是{user.message}程序</h2>
<p>他的名字叫{user.name},今年{user.age}岁</p>
</div>
);
// 将元素渲染到DOM根节点
ReactDOM.render(
templete,
document.getElementById('app')
)
</script>
</body>
四、组件和props
-
组件定义：
- 函数组件：定义组件最简单的方式就是编写 JavaScript 函数
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
ES6 的 class来定义组件
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
-
渲染组件：当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为 “props”。
例如，这段代码会在页面上渲染 “Hello, World”：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="World" />;
ReactDOM.render(
element,
document.getElementById('root')
);
注意：组件名称必须以大写字母开头。
五、state和生命周期
state
state顾名思义就是状态，它只是用来控制这个组件本身自己的状态，我们可以用state来完成对行为的控制、数据的更新、界面的渲染，由于组件不能修改传入的props，所以需要记录自身的数据变化。
setState
-
不要直接修改State
例如，此代码不会重新渲染组件：
// Wrong
this.state.comment = 'Hello';
而是应该使用 setState():
// Correct
this.setState({comment: 'Hello'});
构造函数是唯一可以给this.state赋值的地方
-
State的更新可能是异步的
出于性能考虑，React 可能会把多个
setState()调用合并成一个调用。因为
this.props和this.state可能会异步更新，所以你不要依赖他们的值来更新下一个状态。 -
State的更新会被吞并
当你调用
setState()的时候，React 会把你提供的对象合并到当前的 state。
六、事件处理
-
React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
-
使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。
-
在 React 中另一个不同点是你不能通过返回
false的方式阻止默认行为。你必须显式的使用preventDefault。
<body>
<div id="app"></div>
<script type="text/babel">
class Click extends React.Component {
constructor() {
super();
this.state = {
isopen: true
}
}
render() {
return (
<div>
<button onClick={this.handler.bind(this)}>{this.state.isopen ? '开' : '关'}</button>
<a href="http://www.baidu.com" onClick={this.handlerstop.bind(this)}>百度</a>
</div>
)
}
handler() {
// console.log(this)
this.setState({
isopen: !this.state.isopen
})
}
handlerstop(e) {
e.preventDefault();
alert('阻止a标签')
}
}
ReactDOM.render(
<Click />,
document.getElementById('app')
)
</script>
</body>
七、条件渲染
<body>
<div id="app"></div>
<script type="text/babel">
class Onlogin extends React.Component {
render() {
return (<div><p>欢迎使用</p><button onClick={this.props.onHandleClick}>登出</button></div>)
}
}
class Onlogout extends React.Component {
render() {
return (<div><p>未登录，请登录</p><button onClick={this.props.onHandleClick}>登录</button></div>)
}
}
class Login extends React.Component {
constructor(props) {
super(props);
this.state = {
isLogin: this.props.isLogin
}
}
render() {
let button;
if (this.state.isLogin) {
button = <Onlogin onHandleClick={this.clicklogin.bind(this)} />
} else {
button = <Onlogout onHandleClick={this.clicklogin.bind(this)} />
}
return (
<div>{button}</div>
)
}
clicklogin() {
this.setState({
isLogin: !this.state.isLogin
})
}
}
ReactDOM.render(
<Login isLogin={false} />,
document.getElementById('app')
)
</script>
</body>
八、列表渲染
<body>
<div id="app"></div>
<script type="text/babel">
class List extends React.Component {
constructor() {
super()
this.state = {
numbers: [1, 2, 3, 4, 5]
}
}
render() {
return (
<ul>
{this.state.numbers.map(item => (
<li key={item.toString()}>{item * 2}</li>
))}
</ul>
)
}
}
ReactDOM.render(
<List />,
document.getElementById('app')
)
</script>
</body>
