React学习笔记

JSX简介

ECMAScript 6入门

http://es6.ruanyifeng.com/

元素渲染

const element = <h1>Hello, world</h1>;

• 在一个HTML页面中添加一个 id="root" 的 <div>:

<div id="root"></div>

• 将React元素渲染到根DOM结点中：

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

组件&Props

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

组件名称必须以大写字母开头。

组件的返回值只能有一个根元素。

所有的React组件必须像纯函数那样使用它们的props。

State & 生命周期

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

事件处理

• React事件绑定属性的命名采用驼峰式写法，而不是小写。

• 如果采用JSX的语法你需要传入一个函数作为事件处理函数，而不是一个字符串。

• React中不能使用返回false的方式阻止默认行为，而必须明确的调用preventDefault()。

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

• 属性初始化器，即把回调函数handleClick当作类的属性来初始化，而不是成员函数。

class LoggingButton extends React.Component {
  // This syntax ensures `this` is bound within handleClick.
  // Warning: this is *experimental* syntax.
  handleClick = () => {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

• 箭头函数，箭头函数没有自己的this，箭头函数在解析阶段会绑定父作用域的this。

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // This syntax ensures `this` is bound within handleClick
    return (
      <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
    );
  }
}

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

列表&Keys

表单

状态提升

组合vs继承

深入JSX

• 使用JavaScript表达式作为属性；

• 字符串常量；

• 属性默认为"True"；

• 可以使用...作为展开符来传递整个属性对象；

• 字符串字面量作为子代；

• JSX子代；

• JavaScript表达式作为子代；

• 函数作为子代；

• 布尔值、Null 和 Undefined 被忽略（如果你想让类似 false、true、null 或 undefined 出现在输出中，必须先把它转换成字符串）；

路由（0.13.x版本）

路由配置

import { Redirect } from 'react-router'

React.render((
  <Router>
    <Route path="/" component={App}>
      <IndexRoute component={Dashboard} />
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox}>
        <Route path="/messages/:id" component={Message} />

        {/* 跳转 /inbox/messages/:id 到 /messages/:id */}
        <Redirect from="messages/:id" to="/messages/:id" />
      </Route>
    </Route>
  </Router>
), document.body)

const routeConfig = [
  { path: '/',
    component: App,
    indexRoute: { component: Dashboard },
    childRoutes: [
      { path: 'about', component: About },
      { path: 'inbox',
        component: Inbox,
        childRoutes: [
          { path: '/messages/:id', component: Message },
          { path: 'messages/:id',
            onEnter: function (nextState, replaceState) {
              replaceState(null, '/messages/' + nextState.params.id)
            }
          }
        ]
      }
    ]
  }
]

React.render(<Router routes={routeConfig} />, document.body)

路由匹配原理

• 嵌套关系
• 当一个给定的URL被调用时，整个集合中命中部分都会被渲染。

• 路径语法
• :paramName - 匹配一段位于 /、? 或 # 之后的 URL。 命中的部分将被作为一个参数；
• () - 在它内部的内容被认为是可选的；
• * - 匹配任意字符（非贪婪的）直到命中下一个字符或者整个 URL 的末尾，并创建一个 splat 参数。

<Route path="/hello/:name">         // 匹配 /hello/michael 和 /hello/ryan
<Route path="/hello(/:name)">       // 匹配 /hello, /hello/michael 和 /hello/ryan
<Route path="/files/*.*">           // 匹配 /files/hello.jpg 和 /files/path/to/hello.jpg

• 优先级
路由算法会根据定义的顺序自顶向下匹配路由。

Histories

• browserHistory
推荐的模式，它使用浏览器的History API用于处理URL，创建一个像example.com/some/path这样真实的 URL。对于不支持window.historyAPI的浏览器，任何调用调转的应用就会导致全页面刷新。

• hashHistory
Hash history 使用 URL 中的 hash（#）部分去创建形如 example.com/#/some/path 的路由，不推荐在实际线上环境中使用。

• createMemoryHistory
Memory history 不会在地址栏被操作或读取，必须显示的创建它。

const history = createMemoryHistory(location)

import React from 'react'
import { render } from 'react-dom'
import { browserHistory, Router, Route, IndexRoute } from 'react-router'

import App from '../components/App'
import Home from '../components/Home'
import About from '../components/About'
import Features from '../components/Features'

render(
  <Router history={browserHistory}>
    <Route path='/' component={App}>
      <IndexRoute component={Home} />
      <Route path='about' component={About} />
      <Route path='features' component={Features} />
    </Route>
  </Router>,
  document.getElementById('app')
)

IndexRoute与IndexLinks

<Router>
  <Route path="/" component={App}>
    <IndexRoute component={Home}/>
    <Route path="accounts" component={Accounts}/>
    <Route path="statements" component={Statements}/>
  </Route>
</Router>

动态路由

const CourseRoute = {
  path: 'course/:courseId',

  getChildRoutes(location, callback) {
    require.ensure([], function (require) {
      callback(null, [
        require('./routes/Announcements'),
        require('./routes/Assignments'),
        require('./routes/Grades'),
      ])
    })
  },

  getIndexRoute(location, callback) {
    require.ensure([], function (require) {
      callback(null, require('./components/Index'))
    })
  },

  getComponents(location, callback) {
    require.ensure([], function (require) {
      callback(null, require('./components/Course'))
    })
  }
}

跳转前确认

1. return false 取消此次跳转；

2. return 返回提示信息，在离开 route 前提示用户进行确认。

服务端渲染

• 发生错误时发送一个 500 的响应

• 需要重定向时发送一个 30x 的响应

• 在渲染之前获得数据 (用 router 帮你完成这点)

• 使用 match 在渲染之前根据 location 匹配 route

• 使用 RoutingContext 同步渲染 route 组件

import { renderToString } from 'react-dom/server'
import { match, RoutingContext } from 'react-router'
import routes from './routes'

serve((req, res) => {
  // 注意！这里的 req.url 应该是从初始请求中获得的
  // 完整的 URL 路径，包括查询字符串。
  match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
    if (error) {
      res.send(500, error.message)
    } else if (redirectLocation) {
      res.redirect(302, redirectLocation.pathname + redirectLocation.search)
    } else if (renderProps) {
      res.send(200, renderToString(<RoutingContext {...renderProps} />))
    } else {
      res.send(404, 'Not found')
    }
  })
})

组件生命周期

<Route path="/" component={App}>
  <IndexRoute component={Home}/>
  <Route path="invoices/:invoiceId" component={Invoice}/>
  <Route path="accounts/:accountId" component={Account}/>
</Route>

App: componentDidMount

Home: componentDidMount

Invoice: N/A

Account: N/A

App: componentWillReceiveProps ⇒ componentDidUpdate

Home: componentWillUnmount

Invoice: componentDidMount

Account: N/A

App: componentWillReceiveProps ⇒ componentDidUpdate

Home: N/A

Invoice: componentWillReceiveProps ⇒ componentDidUpdate

Account: N/A

App: componentWillReceiveProps ⇒ componentDidUpdate

Home: N/A

Invoice: componentWillUnmount

Account: componentDidMount

组件外部使用导航

• history.push(path, [state])

• history.replace(path, [state])

• history.go(n)

• history.goBack()

• history.goForward()

• history.canGo(n) (only in createMemoryHistory)

获得上一次路径

<Route component={App}>
  {/* ... 其它 route */}
</Route>

const App = React.createClass({
  getInitialState() {
    return { showBackButton: false }
  },

  componentWillReceiveProps(nextProps) {
    const routeChanged = nextProps.location !== this.props.location
    this.setState({ showBackButton: routeChanged })
  }
})