您的位置: 首页  >  文章  >  React学习Day4

React学习Day4

分类: 文章 • 2022-10-05 20:38:38

Day4

  1. 代理
    (1) 正向代理
    eg:如图 当我访问http://www.weather.com.cn/data/cityinfo/101200101.html时会报跨域问题
    React学习Day4
    React学习Day4
    这时候可以配置正向代理来解决这个问题,配置文件的路径:项目目录下/node_modules/react-scripts/config/webpackDevServer.config.js找到其中的proxy做如下配置
    React学习Day4
    然后把请求url改写如下
    React学习Day4
    就可以发现能够接受到数据了
    React学习Day4
    (2) 反向代理

  2. 弹射 eject(把潜藏在 react- scripts 中的一系列技术栈配置都“ 弹射” 到应用的顶层， 然后我们就可以研究这些 配置细节了， 而且可以更灵活地定制应用的配置。整个过程不可逆,慎用.如果报错了重装依赖)
    npm run eject(yarn eject)

  3. 关于input更新state的几种方法(受控组件,多个input)
    React学习Day4

  4. Derived State派生状态
    static getDerivedStateFromProps(nextProps,preveState)
    getDerviedStateFromProps是一个静态函数,这个函数不能通过this访问到class的属性,也并不推荐直接访问属性 而是通过参数提供的nextProps以及preveState来进行判断,根据新传入的props来新设到state.
    需要注意的是,如果props传入的内容不需要影响到我们的state,那我们就返回一个null,这个值时必须要的 所以我们尽量把它卸载函数的末尾
    React学习Day4

  5. 挂载阶段的声明周期函数
    (1) constructor(props)
    做一些初始化的动作,例如初始化state,将事件处理行数绑定到类实例上
    (2) static getDerivedStateFromProps(props,state)
    在组件实例化后,和接受新的props后被调用.它必须返回一个对象来更新状态或者返回null来时新的props不需要任何state的更新
    如果是由于父组件的props更改所带来的重新渲染,也会触发此方法
    (3) render()
    render()方法是必需的。当他被调用时，他将计算this.props和this.state,并返回以下一种类型：
    a. React元素。通过jsx创建，既可以是dom元素，也可以是用户自定义的组件。
    b. 字符串或数字。他们将会以文本节点形式渲染到dom中。
    c. null，什么也不渲染
    d. 布尔值。也是什么都不渲染。
    (4) componentDidMount()
    组件被装配后立即调用,初始化使得DOM节点应该进行到这里
    通常在这里进行ajax请求
    如果要初始化第三方的dom库,也在这里进行初始化.
    只有在这里才能获取到真是dom.
    声明周期函数的挂载顺序如下:
    React学习Day4

  6. 卸载阶段的声明周期函数 componentWillUnmount(
    组件被卸载并销毁之前立即被调用,在此方法中执行任何必要的清理,例如使定时器无效,取消网络请求或者清理在componentDidMount中创建的任何监听
    React学习Day4

  7. 更新阶段的声明周期函数
    (1)static getDerviedStateFromProps(props,state)
    (2)shouldComponetUpdate(nextProps,nextState)
    默认为true,如果返回为false则componentWillUpdate,render和componentDidUpdate不会被调用,可以加条件减少不必要的渲染，增加性能
    (3) render()
    (4) getSnapshotBeforeUpdate(prevProps,prevState)
    在react render()后的输出被渲染到DOM之前被调用。它使您的组件能够在它们被潜在更改之前捕获当前值（如滚动位置）。
    这个生命周期返回的任何值都将作为参数传递给componentDidUpdate（）。
    (5) componentDidUpdate(prevProps,prevState,snapshot)
    当组件更新时，将此作为一个机会来操作DOM。只要您将当前的props与以前的props进行比较（例如，如果props没有改变，则可能不需要网络请求），这也是做网络请求的好地方。

  8. 对无状态组件用 React.memo(组件)
    (1)我们把 参数是组件 返回值也是组件 这类组件我们叫 “高阶组件”(HOC)
    (2)本质是高阶函数 （map filter forEach …)
    React学习Day4

相关推荐