codepen 上的代码请 fork 后再修改。
环境基础
- Chrome、FireFox等主流浏览器陆续支持 ES6+ 语法。
- QQ、360、搜狗等浏览器已支持 ES6+ 语法。
- 微软全面转移到 Edge。
- 淘宝不再支持 IE 8 。
- 项目已使用 webpack、babel 等来提供转义支持。
简介
A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES
一个用于搭建用户界面的js库
核心思路：假定按照人机交互活动的不同状态来设计UI，根据状态的迁移来自动渲染页面。同时，react 通过组件化来分治状态。
Hello World
// 引入 js 类库
import React from 'react'
import ReactDOM from 'react-dom'
// 定义 HelloWorld 组件
class HelloWorld extends React.Component {
render() {
// return 中是 JSX 语法
return (
<div>
Hello, world!
</div>
);
}
}
// 找到 HTML 中的 id="root" 的标签，将 Hello 作为子元素插入
ReactDOM.render(<HelloWorld/>, document.getElementById('root'));
ReactDOM.render()
在客户端将 react 组件渲染成 HTML 的方法，在一般的 web app 中只在入口 js 文件中写一处。
JSX
一种在 js 中书写 HTML 的简单方式，可以在其中通过 {} 来使用 js 表达式、变量、函数等。需要注意的是，由于 class 是 js 的关键字/保留字，所以 HTML 中的 class 需要写成 className 。简单语法如下。
const generateJSX = (arg) => {
return <h3>{arg}</h3>
};
class HelloWorld extends React.Component {
constructor(props) {
super(props)
this.state = {
val: {key: 'JSX中使用对象的值'},
ifelse: '与其写那些匿名函数箭头函数，不如提出来写更好维护。'
};
}
render() {
return (
<div>
<h1>JSX</h1>
<h3>{this.state.val.key}</h3>
<h3>{true?'JSX中不能直接使用if-else，可以使用三元表达式':null}</h3>
{(function() {
if (true) {
return <h3>在JSX中使用立即执行的匿名函数来写if-else</h3>
}
})()}
{true && <h3>单if的时候可以用表达式&&jsx的方式来写</h3>}
{(() => {
if (true)
return <h3>在JSX中使用立即执行的箭头函数来写if-else</h3>
})()}
{generateJSX(this.state.ifelse)}
</div>
);
}
}
ReactDOM.render(<HelloWorld/>, document.getElementById('root'));
需要注意的是，顶层只能有一对标签。
// bad
return
<div></div>
<div></div>
// good
return
<div>
<div></div>
</div>
为什么要使用 JSX
使用 JSX 时。
<MyButton color="blue" shadowSize={2}>
Click Me
</MyButton>
不使用 JSX 时。
React.createElement(
MyButton,
{color: 'blue', shadowSize: 2},
'Click Me'
)
就一般的 web 开发来说，显然第一种比较直观；对于不一般的 web 开发者来说，也还是第一种比较直观。
React 组件（Component）
React 支持自定义组件，而组件化，是工程化的基础之一。React 支持自定义组件和传参（props）。将自定义组件类比 HTML 标签，参数就类似标签属性，能在 HTML 中怎么使用标签，就能在 JSX 中怎么使用组件。
定义组件
一般由两种方式：函数和 es 6 class 。
函数方式：
function genComA(props={}) {
return <div>hello</div>
}
const genComB = (props={}) => {
return <div>hello</div>
};
class：
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
传参
前面已经有过很多示例。
在 React 中，可以传递给组件的参数类型和 js 一致，包括 number、string、boolean、object、function 等。在组件中通过 this.props 获取接收到的参数。
class HiName extends React.Component {
render() {
return <div>Hi, {this.props.name}</div>
}
}
class HelloWorld extends React.Component {
render() {
return (
<div>
<HiName name={'sweetie'}/>
</div>
);
}
}
// 输出 hi, sweetie
以函数形式创建的组件，则没有 this ，也就没有 this.props ，是通过封装成对象的形式传递，直接用 js 函数传参的方式获取即可。注：必须首字母大写，否则失效。
function Bye(props) {
return <div>{props.name}, goodbye.</div>
}
class HelloWorld extends React.Component {
render() {
return (
<div>
<Bye name={'sweetie'}/>
</div>
);
}
}
this.props.children
React 中有个保留的参数，叫 this.props.children ，主要用于封装和动态加载子组件。常见的用法有单页面 web app 中 header 和 footer 固定，内部内容动态变化等。
class App extends Component {
render() {
return (
<div>
<Header />
<div>
{this.props.children}
</div>
<Footer />
</div>
)
}
}
参数校验
React 支持参数校验，包括 js 的数据类型、自定义类型、非空、枚举等。
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
Greeting.propTypes = {
name: React.PropTypes.string
};
具体参考官网。
状态（state）
React 组件基于自身的 state 变化来触发 render ，并进行相应的计算，达到渲染的效果。所以 state 的使用，是 React 中最重要的部分。
- React 组件的生命周期节点为
mount -> (update) -> unmount。 - 其中
mount和unmount在生命周期中只执行一次，update执行 0 到多次。 -
mount和update都会触发render。 - 对于
mount和update都有will和did两种处理函数，对于unmount只有componentWillUnmount。 - 提供
shouldComponentUpdate来处理比较复杂的情况下组件 state 变化是否渲染，以提升性能。紧急逃生，慎用。 - 提供
componentWillReceiveProps用于组件mount之后接收参数再次更新 state 。
class PropsCount extends React.Component {
componentWillMount() {
console.log('PropsCount will mount')
}
componentDidMount() {
console.log('PropsCount did mount')
}
componentWillUpdate(nextProps, nextState) {
console.log('PropsCount will update')
}
componentDidUpdate(prevProps, provState) {
console.log('PropsCount did update')
}
render() {
console.log('PropsCount render')
return <div>count update by props: {this.props.count}</div>
}
}
class StateCount extends React.Component {
constructor(props) {
super(props);
this.state = {count: props.count};
}
componentWillMount() {
console.log('StateCount will mount')
}
componentDidMount() {
console.log('StateCount did mount')
}
componentWillUpdate(nextProps, nextState) {
console.log('StateCount will update')
}
componentDidUpdate(prevProps, provState) {
console.log('StateCount did update')
}
componentWillReceiveProps(nextProps) {
this.setState({count: nextProps.count});
}
render() {
console.log('StateCount render')
return <div>count update by state: {this.state.count}</div>
}
}
class Init extends React.Component {
constructor(props) {
super(props);
this.state = {count: props.count}
}
componentWillMount() {
console.log('Init will mount')
}
componentDidMount() {
console.log('Init did mount')
}
componentWillUpdate(nextProps, nextState) {
console.log('Init will update')
}
componentDidUpdate(prevProps, provState) {
console.log('Init did update')
}
render() {
console.log('Init render')
return <div>init: {this.state.count}</div>
}
}
class HelloWorld extends React.Component {
addOne = () => {
this.setState({count: this.state.count + 1});
};
constructor(props) {
super(props);
this.state = {count: 0};
}
componentWillMount() {
console.log('HelloWorld will mount')
}
componentDidMount() {
console.log('HelloWorld did mount')
}
componentWillUpdate(nextProps, nextState) {
console.log('HelloWorld will update')
}
componentDidUpdate(prevProps, provState) {
console.log('HelloWorld did update')
}
render() {
console.log('HelloWorld render')
return (
<div>
<Init count={this.state.count} />
<button value="addOne" onClick={this.addOne}>add</button>
<PropsCount count={this.state.count} />
<StateCount count={this.state.count} />
</div>
);
}
}
ReactDOM.render(<HelloWorld/>, document.getElementById('root'));
注意：在 componentWillMount componentWillUpdate 中不要使用 setState。初始化的异步请求最好放在 componentDidMount 里，其他初始化的同步操作放在 constructor 里。
处理事件和获取值
官网参考。
class A extends React.Component {
constructor (props) {
super(props)
this.state={name:null}
}
onChange = (e) => {
this.setState({name: e.target.value})
};
render () {
return <div>
<input type="text" onChange={this.onChange} />
<br />
{this.state.name && <label>hi, {this.state.name}</label>}
</div>;
}
}
