面试题分享

最新推荐文章于 2022-03-23 11:11:03 发布

she-he

最新推荐文章于 2022-03-23 11:11:03 发布

阅读量136

点赞数

文章标签： react.js javascript

本文链接：https://blog.youkuaiyun.com/hujiaojiao525/article/details/120018739

版权

一、React常用的生命周期？功能？

1、constructor()

constructor()构造函数，构造函数,在组件创建的时候调用一次。完成了React数据的初始化，它接受两个参数：props和context，当想在函数内部使用这两个参数时，需使用super()传入这两个参数。

注意：

可以不写constructor，一旦写了constructor，就必须在此函数中写super(),

此时组件才有自己的this，在组件的全局中都可以使用this关键字，

否则如果只是constructor 而不执行 super() 那么以后的this都是错的！！！

如果constructor中不通过super来接收props，在其他生命周期，诸如componentWillMount、componentDidMount、render中能直接使用this.props吗？？

结论：可以的，react在除了constructor之外的生命周期已经传入了this.props了，完全不受super(props)的影响。

2、componentWillMount()

在组件挂载之前( render()之前 )调用。可以用于加载 Loading 条了等操作。

componentWillMount()一般用的比较少，它更多的是在服务端渲染时使用。它代表的过程是组件已经经历了constructor() 初始化数据后，但是还未渲染DOM时。

3、render()

render 只是用来渲染组件。

4、componentDidMount()

在组件挂载之后调用。可以用于耗时操作(请求服务器或定时器等)

5、componentWillUnmount ()

清除你在组建中所有的setTimeout,setInterval

移除所有组建中的监听 removeEventListener

更新过程

componentWillReceiveProps (nextProps)
shouldComponentUpdate(nextProps,nextState)
componentWillUpdate (nextProps,nextState)
componentDidUpdate(prevProps,prevState)

二、父子组件通信？

父组件向子组件通信

// 父组件传递
<Test title={'测试页面标题'} tip={'付款时间节点'} /> 

// 子组件接收
render(){
  return(
     <div>
       <div>{this.props.title}</div>
       <div>{this.props.tip}</div>
     </div>
   )
}

子组件向父组件通信

// 父组件传递
<Test updateFun={this.undateFun} /> 

undateFun = (val: any) => {
    console.log('此处可以接受子组件传过来的参数')
}
// 子组件接收
render(){
  return(
     <div>
        <button onClick={() => this.props.undateFun('我来源于子组件')}>按钮</button>
     </div>
   )
}

三、Vue中computed，watch，methods的区别？

computed的目的就是能使模板中的运算逻辑更简单

computed 应用场景

1. 适用于一些重复使用数据或复杂及费时的运算。我们可以把它放入computed中进行计算, 然后会在computed中缓存起来, 下次就可以直接获取了。

2. 如果我们需要的数据依赖于其他的数据的话, 我们可以把该数据设计为computed中。

<body>
  <div id="app">
    <p>原来的数据: {{ msg }}</p>
    <div>第一次调用computed属性: {{ reversedMsg }}</div>
    <div>第二次调用computed属性: {{ reversedMsg }}</div>
    <!-- 下面是methods调用 -->
    <div>第一次调用methods方法: {{ reversedMsg1() }}</div>
    <div>第二次调用methods方法: {{ reversedMsg1() }}</div>
  </div>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello'
      },
    
      computed: {
        reversedMsg() {
          console.log(1111);
          return this.msg.split('').reverse().join('')
        }
      }
   
      methods: {
        reversedMsg() {
          console.log(2222);
          return this.msg.split('').reverse().join('')
        }
      }
    });
    console.log(vm);
  </script>
</body>

watch的使用场景是：

当在data中的某个数据发生变化时, 我们需要做一些操作, 或者当需要在数据变化时执行异步或开销较大的操作时. 我们就可以使用watch来进行监听。

watch普通监听

watch: {
    age(newVal, oldVal) {
        this.basicMsg = '今年' + newVal + '岁' + ' ' + this.single;
    }
}

watch深度监听

watch: {
    age: {
       handler(newVal, oldVal) {
          this.basicMsg = '今年' + newVal + '岁' + ' ' + this.single;
       },
       immediate: true,
       // deep: true // 需要添加deep为true即可对obj进行深度监听
    }
}

immediate设为true后，则监听的这个对象会立即输出，也就是说一刷新页面就会在控制台输出，

watch 和 computed的区别是：

相同点：他们两者都是观察页面数据变化的。

不同点：computed只有当依赖的数据变化时才会计算, 当数据没有变化时, 它会读取缓存数据。
watch每次都需要执行函数。watch更适用于数据变化时的异步操作。