1.react的基础知识
React 的基础之：JSX 语法
react 使用 JSX 语法，js 代码中可以写 HTML 代码。
let myTitle = <h1>Hello, World!</h1>;
JSX 语法解释：
(1) JSX 语法的最外层，只能有一个节点：
//错误 let myTitle = <p>Hello</p><p>World</p>
(2) JSX 语法中可以插入 JavaScript 代码，使用大括号。
let myTitle = <p>{'Hello' + 'World'}</p>
Babel 转码器
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基础之React组件
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>
结果：
React组件的语法解释
- class MyComponent extends React.Component 是 ES 6语法，表示自定义一个 MyComponent 类，该类继承了积累 React.Component 的所有属性和方法。
- React 规定，自定义组件的开头字母必须大写，比如 MyComponent 不能写为 myComponent，以便于与内置的原生类相区分。
- 每个组件都必须有 render 方法，定义输出的样式。
- <MyComponent/> 表示生产一个组件类的实例，每一个实例一定要有闭合标签，写成 <MyComponent></MyComponent> 也可以。
组件的参数
组件可以从外部传入参数，内部使用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.props对象获取参数。
组件的状态
组件往往会有内部状态，使用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修饰想要实现的方法，然后其他方法都使用空实现，然后子类继承抽象类即可。这里的空实现方法就是钩子方法。
- componentWillMount()：组件加载前调用。
- componentDidMount()：组件加载后调用。
- componentWillUpdate()：组件更新前调用。
- componentDidUpadte()：组件更新后调用。
- componentWillUnmont()：组件卸载后调用。
- componentWillReceiveProps()：组件接受新参数时调用。
