前端开发的演变

静态页面-AJAX-前端MVC-SPA

ReactJS

ReactJS把复杂的页面,拆分成一个个的组件,将这些组件一个个的拼装起来,就会呈现多样的页面。ReactJS可以用于 MVC 架构,也可以用于 MVVM 架构,或者别的架构

JSX语法

JSX语法就是,可以在js文件中插入html片段,是React自创的一种语法

在JSX语法中,只能有一个根标签,不能有多个

const div1 = <div>right</div>;
const div2 = </div>error</div></div>error</div>;
  • 函数调用
<div>{f()}</div> // f是函数名

组件

  • 组件定义
import React from 'react';

class HelloWorld extends React.Component{

    render() { // 重写渲染方法
        return <div>cxk:jntm</div>
    }
}

export default HelloWorld; // 导出该类
  • 使用自定义组件
import React from 'react';
import HelloWorld from "./HelloWorld";

class Show extends React.Component{

    render() {
        return <HelloWorld/>
    }
}
export default Show;
  • 组件参数传递
// 属性传递              标签包裹传递
<HelloWorld name="cxk"> 蔡徐坤</HelloWorld>
// 接收
<div>{this.props.name}{this.props.children}</div>
  • 组件状态

每一个组件都有一个状态,其保存在this.state中,当状态值发生变化时,React框架会自动调用render()方法,重新渲染页面

  • this.state值的设置要在构造参数中完成
  • 要修改this.state的值,需要调用this.setState()完成,不能直接对其进行修改
class HelloWorld extends React.Component{

    constructor(props, context) {
        super(props, context);
        this.state = {
            dataList : [1,2,3]
        };
    }

    render() { // 重写渲染方法
        return <div>
            <ul>
                {
                    this.state.dataList.map((value,index)=>{
                      return <li>{value}</li>
                    })
                }
            </ul>
            <button onClick={()=>{
                let list = this.state.dataList;
                list.push(Math.random());
                this.setState({dataList:list})
            }}>click</button>
        </div>
    }
}
  • 生命周期

添加钩子方法

class HelloWorld extends React.Component{

    // 组件挂载后调用
    componentDidMount() {
        console.log("组件挂载后...");
    }

    // 省略其他
}

前端代码分层

  • Page 负责与用户直接打交道:渲染页面、接受用户的操作输入,侧重于展示型交互 性逻辑
  • Model 负责处理业务逻辑,为 Page 做数据、状态的读写、变换、暂存等
  • Service 负责与 HTTP 接口对接,进行纯粹的数据读写

使用DVA进行数据分层管理

  • 添加models
export default {
    namespace : 'list',
    state:{
        data:[1,2,3]
    }
}
  • 使用数据
import React from 'react'
import {connect} from 'dva'

const namespace = 'list'

const map = (state)=>{
    const list = state[namespace].data;
    return {
        list
    }
};

@connect(map)
class List extends React.Component{
    render() {
        return <ul>
            {
                this.props.list.map((v,i)=>{
                    return <li>{v}</li>
                })
            }
        </ul>
    }
}

export default List;
  • 修改数据
export default {
    namespace: 'list',
    state: {
        data: [1, 2, 3]
    }
    ,
    reducers: {
        addNewData(state){
            let list = [...state.data,Math.random()];

            console.log(list);
            return {
                data:list
            }
        }
    }
}
// 省略导入

// 省略map1

const map1 = (dispatch)=>{
    return {
        addNewData:()=>{
            dispatch(
                {
                    type:namespace+"/addNewData"
                }
            )
        }
    }
}

@connect(map,map1)
class List extends React.Component{
    render() {
        return <ul>
            {
                this.props.list.map((v,i)=>{
                    return <li>{v}</li>
                })
            }
            <button onClick={()=>{
                this.props.addNewData()
            }}>
                点击
            </button>
        </ul>
    }
}

export default List;

results matching " "

No results matching " "

results matching " "

No results matching " "