let myTitle = <h1>Hello, World!</h1>;
(1) JSX 语法的最外层,只能有一个节点:
//错误
let myTitle = <p>Hello</p><p>World</p>
(2) JSX 语法中可以插入 JavaScript 代码,使用大括号。
let myTitle = <p>{'Hello' + 'World'}</p>
js 引擎(包括浏览器和 Node)都不认识 JSX,需要首先使用 Babel 转码,然后才能够运行。
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="babel.min.js"></script>
<script type="text/babel">
// ** 这里添写代码! **
</script>
React 需要加载两个库:React 和 React-DOM,前者是 React 的核心库,后者是 React 的 DOM 适配库。
Babel 用来在浏览器转换JSX语法,如果服务器已经转好了,浏览器就不需要加载这个库。
React 允许用户定义自己的组件,插入网页。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>菜鸟教程 React 实例</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class MyComponent extends React.Component {
render() {
return <h1>Hello world</h1>;
}
};
ReactDOM.render(
<MyComponent/>,
document.getElementById('example')
);
</script>
</body>
</html>
结果:
组件可以从外部传入参数,内部使用this.props获取参数。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class MyComponent extends React.Component {
render() {
return <h1 style={{color: this.props.color}}>
{this.props.name}
</h1>;
}
};
ReactDOM.render(
<MyComponent name='Hello world' color='red' />,
document.getElementById('example')
);
</script>
</body>
</html>
结果:
组件往往会有内部状态,使用this.state表示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class MyComponent extends React.Component {
constructor(... args) {
super(...args);
this.state = {
test: 'Hello State',
isClicked: false
};
}
handleClick() {
let isClicked = !this.state.isClicked;
this.setState({
isClicked : isClicked,
text: isClicked ? 'Hello State' : Date();
});
}
render() {
return <h1 onClick={this.handleClick.bind(this)}>
clikc to : {this.state.text}
</h1>
}
};
ReactDOM.render(
<MyComponent/>,
document.getElementById('example')
);
</script>
</body>
</html>
class MyTitle extends React.Component {
constructor(...args) {
super(...args);
this.state = {
name: '访问者'
}
}
}
constructor是组件的构造函数,会在创建实例时自动调用。...args表示组件参数,super(...args)是ES6规定的手法。this.state对象用来存放内部状态,这里是定义初始状态。
<div>
<input type="text" onChanges={this.handleChange.bind(this)}>
<p>你好,{this.state.name}</p>
</div>
this.state.name表示读取this.state的name属性。每当输入框有变动的时候,就会自动调用onChange指定的监听函数,这里是this.handleChange, .bind(this)表示该方法内部的this,绑定当前组件。
handleChange(e) {
let name = e.target.value;
this.setState({
name: name
});
}
this.setState方法用来重置this.state,每次调用这个方法,就会引发组件的重新渲染。
React为组件的不同生命周期,提供了近十个钩子方法。
钩子方法:是对于抽象方法或者接口的一个空实现。
现实中的一应用,想要实现某个接口中的一个方法(该接口中有多个方法),先用一个抽象类实现这个接口,然后用abstract修饰想要实现的方法,然后其他方法都使用空实现,然后子类继承抽象类即可。这里的空实现方法就是钩子方法。