| 今日份的学习

今日份的学习(4)

关于react的Component和PureComponent

在平时的react的使用中，我们通常使用生命周期函数中的shouldComponentUpdate这个方法去判断是否有相关的值改变了，决定这个组件的render函数要不要执行，提高性能。但是在后来的react fibre中，提出了一个叫PureComponent，它在底层帮我们实现了这个判断，不需要我们在每个组件里都去到这个生命周期函数中去定义。

用异步请求后台数据的时候，适合在哪个生命周期去请求

  • 答案是 componentDidMount

  • 原因是因为：这个方法会在组件第一次挂载(被添加到DOM)的时候执行，在组件的生命周期中仅会执行一次。更重要的是我们不能保证在组件挂载之前异步请求已经完毕，这也就意味着我们将会尝试在一个未挂载的组件上调用setState，这将不起作用。而在componentDidMount中发起网络请求将保证这有一个组件可以更新了。

在react开发中遇到的一个问题

1
2
3
4
5
6
7
8
9
10
11
12
13
render() {
  const Content = this.renderContent();
  return (<div className='StudioWrap'>
      <CommonHeader
          backImg={require('../../img/icon/back.png')}
          userImg={require('../../img/signin.png')}
          pageTitle={require('../../img/font/studioTitle.png')}
          navBackPath='/' />
      <Switch>
          <Route path='/studio' component={Content} />
      </Switch>
  </div>);
}

会有报错信息Warning: Failed prop type: Invalid prop 'component' supplied to 'Route': the prop is not a valid React component

后来在github上看到有人提出了同样的问题，下面有解决方案

神奇传送门

我采用的做法是：

1
const Content = () => this.renderContent();

用一个箭头函数封装一次就可以了

对组件化的理解

两个最大的用处：

  • 组件的封装

    • 视图
    • 数据
    • 变化逻辑(数据驱动视图变化)

  • 组件的复用

    • props传递

JSX的本质

  • react引入的一个编程的语法(语法糖)最终解析成JS 已经成为一个标准
  • 开发环境编写JSX语法，但是过后会解析成为JS的语法形式
  • 因为JSX的语法已经独立成为一种标准，所以它和其他标准兼容和扩展性都没有问题

JSX和VDOM的关系

  • 为何需要vdom：jsx需要渲染成HTML，数据驱动视图
  • React.createElement和VDOM的h函数都生成vnode
  • 何时patch：reactDOM.render(…)和 setState()
  • 自定义组件的解析：初始化实例，然后执行render

说一下setState的过程

  • setState是异步的
  • 为什么异步呢？
    • 可能会一次执行多次setState
    • 你无法规定限制用户如何使用setState
    • 没必要每次setState都重新渲染，节约性能
    • 即便每次重新渲染，用户也看不到中间的效果
    • 只看到最后的结果即可

阐述对react和vue的认识

  • 两者的本质区别

    • Vue的本质的MVVM框架，由MVC框架发展而来
    • React的本质是前端组件化框架，由后端组件化发展而来

  • 看模板和组件化的区别

    • Vue使用模板(最初由angular提出)
    • React使用JSX
    • 模板语法上，更倾向于JSX
    • 模板分离上，更倾向于Vue
    • react本身就是组件化，没有组件化就没有react
    • Vue也支持组件化，但是是在MVVM上的扩展(查阅Vue的组件化文档，内容非常多，有时候多不一定是好，东西应该简练易懂)
    • 对于组件化，更加倾向于react，做的彻底而清晰

  • 两者的共同点

    • 都支持组件化
    • 数据驱动视图

  • 国内首推Vue。文档易读、易学、社区够大。推荐技术不是特别扎实的团队使用。

  • 团队水平较高，推荐使用react。组件化和JSX

在react项目里用fetch请求本地mock的数据

其实是一个很简单的事情，但是因为总是报错

因为检查了json文件格式并没有错误，但是这个报错真的很笼统。
后来一下午试过去多方法，比如还安装了mockjs和fetch-mock发现都不行。

后来看某博客才发现，是因为路径的关系，因为用的create-react-app搭的脚手架，所以webpack是内部封装的，js文件打包后都会被注册到外部public文件的index.html里面，所以mock的数据文件最好也放在public下面。然后以index.html的位置为准的地方请求mock数据，就是这样:

本来我以为就好了，后来发现请问我请求的路径在index.html的下一层级，所以应该这样:

这样就好了，这个坑真大！！！！

关于react无状态组件

普通UI组件写法：

1
2
3
4
5
6
7
8
9
import React from 'react';

class ReadMore extends React.Component{
    render(){
        return (...);
    }
}

export default ReadMore;

无状态组件写法：

1
2
3
4
5
6
7
import React from 'react';

const ReadMore = (props) => {
    return (...);
};

export default ReadMore;

优点：

  • 不会被注入不需要的生命周期函数
  • 只执行自己需要执行的逻辑

缺点：

  • 父组件重新渲染的是时候会跟着一起重新渲染
  • 不存在生命周期函数所以无法决定什么时候不渲染
ESC