不得不说,开源中国这博客的 Typography 做的不太行,几次想要使用 markdown语法写点东西的时候,想到那层次不清的排版,还是放弃了。既然这样,还是继续使用富文本吧。
React
基本组件 + render 函数
import React,{Component} from 'react' import ReactDOM from 'react-dom' class App extends React.Component { render() { return ( <Router> <div className='container'> <Nav /> <Switch> <Route exact path='/' component={Home} /> <Route exact path='/battle' component={Battle} /> </Switch> </div> </Router> ) } }
状态初始化 state
class App extends React.Component { constructor(props) { super(props); this.state = { number: 0,}; }; render() { // more code here } }
state 的 prop 验证
export class Counter extends React.Component { constructor(props) { super(props); this.state = {count: props.initialCount}; } tick() { this.setState({count: this.state.count + 1}); } render() { return ( <div onClick={this.tick.bind(this)}> Clicks: {this.state.count} </div> ); } } // prop verify Counter.propTypes = { initialCount: React.PropTypes.number }; Counter.defaultProps = { initialCount: 0 };
挂载函数 componentDidMount
class App extends React.Component { constructor() { this.state = { data: [] } } loadFromServer() { $.ajax({ url: this.props.url,dataType: 'json',success: (data) => { this.setState({data: data}) },error: (xhr,status,err) => { console.error(this.props.url,err.toString()) } }) } componentDidMount() { this.loadFromServer(); setInterval(this.loadFromServer.bind(this),this.props.pollInterval) } render() { return <div className="text"> <h1>Comments <List data={this.state.data} /> </div> } }