• React本身只是一个DOM的抽象层，使用组件构建虚拟DOM

• 通信： 组件之间如何通信

• 数据流： 数据和视图串联，路由和数据绑定，编写异步逻辑

• 通信： 像子组件发消息； 像父组件发消息； 向其他组件发消息

class Son extends React.Component {
    render(){
        return <imput />;
    }
}

class Father extends React.Component {
    render(){
        return <div>
            <Son/>
            <p>显示Son组件的内容</p>
        </div>;
    }
}
ReactDOM.render(<Father/>,mountNode)

class Son extends React.Component {
    render() {
        retrun <input onChange={this.props.onChange}/>
    }
}

class Father extends React.Component {
    constructor(){
        super();
        this.state = {
            son: ""
        }
    }
    changeHandler(e){
        this.setState({
            son: e.target.value
        });
    }
    render(){
        return <div>
            <Son onChange={this.changeHandler.bind(this)}/>
            <p>这里显示 Son 组件的内容：{this.state.son}</p>
        </div>;
    }
}
ReactDOM.render(<Father/>, mountNode);

• 目前使用较多的数据流处理方案：

  • 路由：React-Router
  • 架构：Redux
  • 异步操作： Redux-saga
  • 缺点：要引入多个库，项目结构复杂

• dva：体验技术部开发的React应用框架，将上述三个React工具包包装在一起，简化了API，让React应用更加方便和便捷。

• dva = React-Router + Redux + Redux-saga

• dva App 最简单的结构

import dva from 'dva';
const App = () => <div>Hello shabi</div>;

//create App
const app = dva();
//注册视图
app.router(() => <App />);
//启动应用
app.start('#root');

• 数据流图：
  State --[connect]--> View --[dispatch]-->Action ----> State

• 核心概念：

  • State： 一个对象，保存整个应用状态
  • Action： 一个对象，描述事件
  • connect方法：一个函数，绑定State到View
  • dispatch方法： 一个函数，发送Action到State

• State和View：

  • State是存储数据的地方，收到Action以后，会更新数据
  • View就是React组件构成的UI层，从State取数据后，渲染成HTML代码。只要State有变化，View就会自动更新

• Action：

  • 用来描述UI层事件的一个对象

{
    type:'click-submit-button',
    payload:this.form.data
}

• connect方法：
• connect是一个函数，绑定State到View

iport {connect} from 'dva';

function mapStateToProps(state){
    return {todos:state.todos};
}

connect(mapStateToProps)(App);

• dispatch方法：
  • dispatch是一个函数方法，用来将Action发送给State。

dispatch({
    type:'click-submit-button',
    payload:this.form.data
})

• dva应用最简结构

cosnt app = dva();

app.model({
    namespace: 'count',
    state: 0,
    reducers:{
        add(state){return state +1},
    },
    effects:{
        *addAfter1Second(action, {call, put }){
            yield call(delay,1000);
            yield put({type: 'add'});
        },
    },
});

//注册视图
app.router(() => <ConnectedApp />);

//启动项目
app.start('#root');

• 数据流图【形式一】
  Store(State) --connect--> View --dispatch--> Action ---->Middleware ----> State

• 数据流图【形式二】

  • URL --> Store(State -)--connect-> View --dispatch-> Action --> Middleware -reduce-> State

  • effect ----> Middleware --reducer-->

  • effect ----> Server

• app.model

  • dva提供app.model这个对象，所有的应用逻辑都定义在此上

const app = dva()

app.model({/**/});
app.router(() => <App />);
app.start('#root');