React

续篇：react中路由和按需加载问题

1 组件基本

import React from 'react'
import ReactDOM from 'react-dom'
class Hello extends React.Component {
  render () {
    return <div className='message-box'>
      Hello {this.props.name}
    </div>
  }
}

2 生命周期

Mounting

constructor (props)                             Before rendering #
componentWillMount()                              Don’t use this #
render()                                                  Render #
componentDidMount()              After rendering (DOM available) #
componentWillUnmount()                        Before DOM removal #
componentDidCatch()                           Catch errors (16+) #

Updating

componentWillReceiveProps (newProps)           Use setState() here
shouldComponentUpdate (newProps, newState)     Skips render() if returns false
componentWillUpdate (newProps, newState)       Can’t use setState() here
render()                                       Render
componentDidUpdate (prevProps, prevState)      Operate on the DOM here

3 小知识点

this.props.children组件内部的其他组件

jsx中ref属性，指向dom元素本身，可直接操作dom

4 Redux

React基本的count例子：
在jsfiddle中查看这个例子

import React from 'react'
import ReactDOM from 'react-dom'
class Count extends React.Component {
  constructor(props){
    super(props);
    this.state={count:0}
  }
  handleUp(){
    this.setState({count:this.state.count+1});
  }
  handleDown(){
    this.setState({count:this.state.count-1});
  }
  render () {
    return (
        <div>
            <p>{this.state.count}</p>
            <button onClick={this.handleUp.bind(this)}>+</button>
            <button onClick={this.handleDown.bind(this)}>-</button>
        </div>
    );
  }
}
ReactDOM.render(<Count/>,mountDom);

Redux基本的count例子：
在jsfiddle中查看这个例子

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore,combineReducers } from 'redux'
import { Provider,connect } from 'react-redux'

//reducer
function myReducer(state=0,action){
    if(action.type == "count/up") {
      return state+1;
    }
    if(action.type == "count/down") {
      return state-1;
    }
    return state;
}
let reducer=combineReducers({count:myReducer})

//store
let store = createStore(reducer);

//component
function Count({dispatch,count}){   
  return (
    <div>
        <p>{count}</p>
        <button onClick={()=>dispatch({type:"count/up"})}>+</button>
        <button onClick={()=>dispatch({type:"count/down"})}>-</button>
    </div>
  );
}
let Newcount=connect((state)=>({count:state.count}))(Count)

ReactDOM.render(<Provider store={store}><Newcount/></Provider>,mountDom);

5 ReduxThunk

处理异步事件
在jsfiddle中查看这个例子

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore,combineReducers,applyMiddleware  } from 'redux'
import { Provider,connect } from 'react-redux'
import thunk from 'redux-thunk'

//reducer
function myReducer(state=0,action){
    if(action.type == "count/up") {
      return state+1;
    }
    if(action.type == "count/down") {
      return state-1;
    }
    return state;
}

let reducer=combineReducers({count:myReducer},applyMiddleware(thunk))

//store
let store = createStore(reducer,applyMiddleware(thunk));

function asyncf(){
    return (dispatch)=>{setTimeout(()=>dispatch({type:"count/down"}),1000)}
}
//component
function Count({dispatch,count}){
    return (
        <div>
      <p>{count}</p>
      <button onClick={()=>dispatch({type:"count/up"})}>+</button>
      <button onClick={()=>dispatch({type:"count/down"})}>-</button>
      <button onClick={()=>dispatch(asyncf())}>delay-</button>
    </div>
  );    
}
let Newcount=connect((state)=>({count:state.count}))(Count)

let App =function(){ 
  return <Provider store={store}>
           <Newcount/>
         </Provider>
};

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

6 ReactRouterDom

早期版本是react-router，4.0之后react-router-dom中的内容包括了前者，并进行了扩充，可以只使用后者。

import {Link,BrowserRouter,Switch, Route} from 'react-router-dom';
//......
//......
//<Link to="/hi"> 产生一个超链接
ReactDOM.render(
    <Provider store={store}>
        <BrowserRouter>
            <Switch>
                <Route exact path="/" component={Con} />
                <Route exact path="/hi" component={Hi} />
            </Switch>
        </BrowserRouter>
    </Provider>
    ,
    document.getElementById("root")
);