React state props refs

梳梳
91 阅读2分钟

说说对 State 和 Props的理解，有什么区别？

State

  • 组件由数据状态和外部参数所决定

  • 数据状态 state

    • 在 constructor 中初始化

    • 通过调用setState来改变 → 更新组件内部数据 → 重新调用组件render

    • setState 的第二个参数：监听渲染是否完成函数

      • 在setState调用完成并且组件开始重新渲染时被调用

Props

  • props 作为组件（从概念上看就是一个函数）输入值

  • 从父组件向子组件中传递数据（react具有单向数据流）

  • 传字符串、数字、对象、数组、回调函数

  • 在子组件中，props在内部不可变

      • 想要改变它只能通过外部组件传入新的props来重新渲染子组件

相同点

  • 都是 JavaScript 对象

  • 都是用于保存信息

  • 都能触发渲染更新

区别

  • props

    • 外部传递给组件的

    • 在组件内部是不可修改的

  • state

    • 在组件内被组件自己管理的，一般在 constructor 中初始化

    • 在组件内部可以进行修改

setState是同步还是异步

  • setState本身并不是异步

  • 异步操作是为了提高性能，将多个状态合并一起更新，减少re-render调用

  • 每次调用setState都会触发更新

  • 实现同步

    • 在回调函数中，实时的获取到更新之后的数据
state = {
   number:1
}
componentDidMount(){
   this.setState({number:3},()=>{
       console.log(this.state.number)   // 3
   })
}
  • 利用setTimeout
state = {
   number:1
};
componentDidMount(){
   setTimeout(()=>{
     this.setState({number:3})
     console.log(this.state.number)   //3
   },0)
}
  • 还有在原生事件环境下
state = {
    number:1
};
componentDidMount() {
    document.body.addEventListener('click', this.changeVal, false);
}
changeVal = () => {
    this.setState({
      number: 3
    })
    console.log(this.state.number)   //3
}

说说对React refs 的理解？应用场景？

是什么

  • 提供允许我们访问 DOM节点

    • 渲染dom则返回的是具体的dom节点

  • 在 render方法中创建的 React元素的方法

    • 渲染组件则是ReactDOM.render()返回的组件实例

如何使用

  • 传入字符串，使用时通过 this.refs. 传入的字符串的格式获取对应的元素

  • 传入对象，对象是通过 React.createRef() 方式创建出来，使用时获取到创建的对象中存在 current 属性就是对应的元素

  • 传入函数，该函数会在 DOM 被挂载时进行回调，这个函数会传入一个可以自己保存的元素对象，使用时直接拿到之前保存的元素对象即可

  • 传入hook，hook是通过 useRef() 方式创建，使用时通过生成hook对象的 current 属性就是对应的元素

应用场景

  • 不推荐使用refs来更新组件

    • 过多使用refs，会使组件的实例或者是DOM结构暴露，违反组件封装的原则

  • 对Dom元素的焦点控制、内容选择、控制

  • 对Dom元素的内容设置及媒体播放

  • 对Dom元素的操作和对组件实例的操作

  • 集成第三方 DOM 库

avatar
文章
阅读
粉丝