zoukankan      html  css  js  c++  java
  • refs的作用是什么,你在什么业务场景下使用过refs

    0.refs的作用是什么,你在什么业务场景下使用过refs
    作用是操作dom
    场景:图片加载完以后获取图片的宽高

    // window上添加事件监听后,组件销毁前需要移除
    class Test extends React.Component {
      constructor(props){
        super(props);
        this.state = {
          top: 0
        }
        this.handleWindowScroll = this.handleWindowScroll.bind(this);
      }
    
      handleWindowScroll() {
        this.setState({
          top: document.body.scrollTop
        })
      }
    
      componentDidMount() {
        window.addEventListener('scroll', this.handleWindowScroll);
      }
    
      componentWillUnmount() {
        window.removeEventListener('scroll', this.handleWindowScroll);
      }
    
      render() {
        return <div>{this.state.top}</div>
      }
    }
    

    1.高阶组件你是怎么理解的,它本质是一个什么东西?
    高阶组件和继承,哪一种更好?
    个人认为,包括官方也认为,在react中不要用继承,设计模式里面就有一种明确的说法是组合优于继承。
    react这种组件式的编程方式,实际上是把一些组件合在一起,是一种组合式的设计模式,一定是优于继承的。所以它的可维护性要比继承好的多。

    高阶组件实际上就是一个函数,它接受一些参数,返回一个函数。高阶组件是对组件进行包装,返回一个新的组件。
    一个组件,大部分情况下可以直接使用,只有少数情况下有一点区别,我们可以把区别写在高阶组件里面。

    当一个组件嵌套多层高阶组件,就会出现高阶组件地狱的情况。可以通过hook解决。

    2.函数组件怎么做性能优化?
    函数式组件比普通组件性能高,因为它是一个函数,没有生命周期,相对于类来说,没有构造类的过程,所以它性能高。
    但是因为它没有 shoudComoponentUpdate 这个生命周期,所以每当props改变时,函数就会重新执行。
    性能优化:
    可以通过 React.memo() 对函数式组件进行包装,然后再返回,包装后的函数式组件就带有了shouldComponentUpdate的特性。

    React.memo(function Test(props){
       return <div>123</div>
    })

    3.哪个生命周期里发送ajax?
    在 componentDidMount 里
    (1) componentWillMount 在新版本react中已经被废弃了
    (2) SSR项目时,componentWillMount要做服务器端数据的获取,所以不能被占用
    注:SSR 服务器端渲染,可以使网站SEO效果更加的完善(搜索引擎优化)

    4.SSR的原理是什么?
    这个要从虚拟dom说起,虚拟dom的一个好处是可以让我们的代码运行速度更快,另一个好处是,虚拟dom让我们的react代码,最终变成了JS对象。
    也就可以让我们的react代码可以在客户端(浏览器)上执行,还可以在服务器上执行。
    服务器上是没有dom这个概念的,通过nodejs 也可以运行的react代码。
    SSR核心的原理是通过 借助虚拟dom来实现的。

    5.组件是什么?类是什么?类被编译成什么?
    组件指的是页面的一部分,本质是一个类,最本质上是一个构造函数
    类是构造函数
    类被编译成构造函数
    模块是webpack引入的那一个个文件

    6.如何避免ajax数据重新获取
    通过 react-redux 统一管理数据

    7.reselect 是做什么使用的?
    对应 vue 的 computed (计算属性),做了缓存提升代码的性能

    8.react-router的基本原理,hashHistory,browserHistory
    browserHistory 依赖于后端服务器的配置

    9.什么情况下使用异步组件
    路由懒加载,解决spa应用在网速慢的情况下,页面加载慢的问题
    reloadable库
    // 新版本
    import('./home/header').then

    // 旧版本
    require.ensure

    10.XSS攻击在react中如何防范?
    react 本身已经做的比较好了
    慎用 dangerouslySetInnerHTML={{_html: '<script>alert(1)</script>'}}

  • 相关阅读:
    我的第一篇博客
    吴裕雄--天生自然python学习笔记:Python3 标准库概览
    吴裕雄--天生自然python学习笔记:Python3 命名空间和作用域
    吴裕雄--天生自然python学习笔记:Python3 面向对象
    吴裕雄--天生自然python学习笔记:Python3 错误和异常
    吴裕雄--天生自然python学习笔记:Python3 OS 文件/目录方法
    吴裕雄--天生自然python学习笔记:Python3 File(文件) 方法
    吴裕雄--天生自然python学习笔记:Python3 输入和输出
    吴裕雄--天生自然python学习笔记:Python3 模块
    吴裕雄--天生自然python学习笔记:Python3 数据结构
  • 原文地址:https://www.cnblogs.com/crazycode2/p/12111696.html
Copyright © 2011-2022 走看看