初学 react 技术总结

项目技术总结

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

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

一、react

• 1.一、学习基础的 react 基础，class
• 1.二、学习 react-router 路由的使用
• 1.三、学习 react 父子级传数据
• 1.四、学习 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>
    );
}
复制代码

二、es6+

• 2.一、对象，数组解构
• 2.二、跟加合理的使用函数值
• 2.三、活用一些 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;
 
复制代码

三、react-weui

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

遇到的坑

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

引用

• 胡子小书
• 官网