react生命周期

什么是虚拟DOM( Virtual Document Object Model )

DOM的本质：就是用JS表示UI的元素，DOM是由浏览器中的JS提供功能，所以我们只能人为的使用浏览器提供的固定的api来操作DOM对象

虚拟DOM：并不是由浏览器提供，而是程序员手动模拟实现的，类似于浏览器中的DOM

Diff算法

使用ReactDOM把元素渲染到页面指定的容器中

JSX语法

类组件跟函数组件有什么区别

(this，生命周期，是否有状态)

函数组件的性能比类组件的性能要高，因为类组件使用时候要实例化，而函数组件直接执行函数取返回结果即可

props和state区别

state是组件自己管理数据，控制自己的状态，可变

props是外部传入的数据参数，不可变

没有state的叫做无状态组件，有state的叫做有状态组件

如何使用refs

refs是使用React.createRef()创建，并通过ref属性附加到react元素

this.myRef = React.createRef() <div ref={this.myRef} />

ref = {(input) => this.input = input}

export default class App extends React.Component{
  constructor(props) {
    super(props);
    //分配给实例属性
    this.inputRef = React.createRef(null);
  }
  componentDidMount() {
    //通过 this.inputRef.current 获取对该节点的引用
    this.inputRef && this.inputRef.current.focus();
  }
  render() {
    //把 <input> ref 关联到构造函数中创建的 `inputRef` 上
    return (
      <input type="text" ref={this.inputRef}/>
    )
  }
}

什么是高阶组件(HOC)

接受一个组件并返回一个新组件的函数

代码重用、

渲染劫持

state抽象和操作

props处理

什么是JSX

JSX代码本身不能被浏览器读取，必须使用babel和webpack等工具将其转成传统的JS

CodesSandbox：https://codesandbox.io/s/4x5xjmzl24

组件或者程序从创建到销毁的过程，我们可以在过程中间基于钩子函数完成一些自己的操作（例如：在第一次渲染完成做什么，或者在二次即将重新渲染之前做什么等...）

[基本流程]
constructor 创建一个组件
componentWillMount 第一次渲染之前
render 第一次渲染
componentDidMount 第一次渲染之后

[修改流程：当组件的状态数据发生改变(SET-STATE)或者传递给组件的属性发生改变(重新调用组件传递不同的属性)都会引发RENDER重新执行渲染(渲染也是差异渲染)]
shouldComponentUpdate 是否允许组件重新渲染(允许则执行后面函数，不允许直接结束即可)
componentWillUpdate 重现渲染之前
render 第二次及以后重新渲染
componentDidUpdate 重现渲染之后

componentWillReceiveProps：父组件把传递给子组件的属性发生改变后触发的钩子函数

[卸载：原有渲染的内容是不消失的，只不过以后不能基于数据改变视图了（定时器，事件解绑）]
componentWillUnmount：卸载组件之前

CodesSandbox：https://codesandbox.io/s/4x5xjmzl24

[基本流程]
constructor 创建一个组件
componentWillMount 第一次渲染之前
render 第一次渲染
componentDidMount 第一次渲染之后

componentWillReceiveProps：父组件把传递给子组件的属性发生改变后触发的钩子函数

[卸载：原有渲染的内容是不消失的，只不过以后不能基于数据改变视图了（定时器，事件解绑）]
componentWillUnmount：卸载组件之前

posted @ 2019-03-04 19:02 慕斯undefined 阅读(139) 评论(0) 编辑收藏举报

刷新页面返回顶部

慕斯undefined

react生命周期

公告