初学 react 技术总结

西南_张家辉

发布于 2021-02-02 10:04:22

3780

发布于 2021-02-02 10:04:22

文章被收录于专栏：张家辉的树屋

项目技术总结

初学 react，做了一个简单的 h5 项目

使用了 react 14，mbox，react-weui，bugsnag（捕获报错），lodash（函数库），commitLint（git 提交工具）等。
主要是总结自己学习中产生的一些经验之谈和项目遇到的坑。

1、react

1.1、学习基础的 react 基础，class
1.2、学习 react-router 路由的使用
1.3、学习 react 父子级传数据
1.4、学习 mobx

react 遇到的坑和初学的经验之谈

1A: 遇到的第一个问题就是子父级传值的问题，传值这个问题的解决方案在自己写的 blog 中可以看到。
- 解决方案：父子，子父传值笔记
- 解决方案：胡子-react 小书
1B: 同级之间传值问题
- 解决方案：同级传值的方案
- 当然我们也可以看看 react 小书，使用的方法就是使用同一个父级，先传值给父级然后再分发数据。
1C:使用 react-router 的时候遇到的跳转的问题，在配合我的 tab 的使用的时候，主界面由于有两个小的 tabs(外海银行和社保平台)，开始直接使用的 react-weui的 tab 切换，但是发现在很多界面跳转的时候会出现跳转的时候并不是跳转到对应的正确的界面。
- 分析：主要是因为没有使用路由的原因，然后被迫出了使用 react-router 中的 history的传值的方法（state 等），导致 code 结构比较乱。
- 解决方案：最后还是改回了使用路由的方法。
1D: 每个组件的结构问题，应该多使用无状态的组件，耦合度太高。需要优化
- 解决方案 ：多看大佬的代码
1E: 用户数据和一些状态的接口数据每次在页面加载的时候都要获取一次，比较浪费内存和加载时间
- 解决方案：使用 mobx 和 sercuity.js提前获取用户信息，然后在需要的页面直接使用 mobx 载入获取。节约时间

react 优化

1F:函数方法写法优化

// old one
onChange={this.handleContentChange.bind(this)} />
 
// good one
onChange={e=>{this.handleContentChange(e)}} />

1G：合理的使用_render()来处理数据的变化

//合理的使用 _render(),把需要做数据处理和转换的 render 先分离出来再做 render 处理
//部分引用代码就不贴了
_render() {
    const { user } = this.state;

    return (
        user && (
            <div className="box">
               <ul>
                    <li> 姓名: {user.name || '暂无'}li>
                    <li> 状态: {user.status || '暂无'}li>
                    <li> 手机: {user.tel || '暂无'}li>
               ul>
            div>
        )
    );
}

render() {
    return (
        <Page className="page">
            <Title title="详细信息" />
            {this._render()}
        Page>
    );
}

复制代码

1H:当需要调用接口的时候，一定有 loading 和 error 错误提示；给用户一个比较好的体验

//还是刚刚那个栗子

getUser = async () => {
    this.setState({
        loading: true,
        error: null
    });

    try {
        const { data } = await http.get(API.user());

        this.setState({
            user: data
        });
    } catch (error) {
        this.setState({
            error
        });
    }

    this.setState({
        loading: false
    });
};

_render() {
    // 当然我们首先要根据项目来自定义我们的 loading 框和 error 框，一些开源的 UI 框架也有这些设计，直接用也可以。
   const { loading, error, user } = this.state;

    if (loading) {
        return <Loading className="loading" />;
    }

    if (error) {
        return <ErrorBox error={error} onClick={this.getUser} />;
    }

    return (
        user && (
            <div className="box">
               <ul>
                    <li> 姓名: {user.name || '暂无'}li>
                    <li> 状态: {user.status || '暂无'}li>
                    <li> 手机: {user.tel || '暂无'}li>
               ul>
            div>
        )
    );
}

render() {
    return (
        <Page className="page">
            <Title title="详细信息" />
            {this._render()}
        Page>
    );
}
复制代码

2、es6+

2.1、对象，数组解构
2.2、跟加合理的使用函数值
2.3、活用一些 es6 的最新的函数方法

遇到的坑和初学的经验之谈

2A: 写法问题，super 和 constructor 写法

// old one
class CommentInput extends Component {
  constructor () {
    super()
    this.state = {
      username: '',
      content: ''
    }
  }
  ...
}

//good one
/*
** 我们可以不用 super 来继承了，现在可以简写
*/
class CommentInput extends Component {
    state = {
      username: '',
      content: ''
    }
  
  ...
}
复制代码

2B: 使用复杂的多重解构，进行精确取值

this.props.$formutil = { 
    $params: { amount: 100 }, 
    a: 'test',
    b:[{ c:'hello' },2,3]
    
}
 //可以使用同数据结构相同的方法直接拿到内部的 amount
 const { $params: { amount }, a , b:[{ c }] } = this.props.$formutil;

3、react-weui

3.1 简介：ui 框架类似于 weui 的其他框架，主要和微信的 UI 风格近似。
3.2 使用：直接引用组件，看文档就可以使用

遇到的坑

3A、在使用 react-weui 的 dialog 组建的时候，由于层级的关系，导致在 apple 手机上显示有问题。
- 解决方案：开始以为是 dialog 的 type 选项的问题(andiord 和 ios的问题)，修改也不行，强行修改 style 也不行，最后使用了项目自己写的 dialog 的组件解决：
- 总结：底层样式问题，开始的布局没有好好写，react-weui 组件问题。