React 进阶之路

1. 箭头函数内的 this 指向函数定义时所在的上下文对象,而不是函数执行时所在的上下文对象。

2. 引入 rest 参数(形式为 ...变量名)用于获取函数的多余参数,来代替 arguments 对象的使用。rest 参数是一个数组,数组织中的元素是多余的参数。注意,rest 之后不能有其他参数。

function languages(lang, ...types){
    console.log(types);
}
languages('JavaScript', 'Java', 'Python');  //["Java","Python"]

3. 扩展运算符:是三个点(...),它讲一个数组转化成用逗号分隔的参数序列,类似于 rest 参数的逆运算。

function sum(a, b, c){
    return a + b + c;
}
let numbers = [1, 2, 3];
sum(...numbers); //6

4. 组件的生命周期:组件从创建到被销毁的过程称为组件的生命周期。React 为不同的生命周期阶段提供了不同的生命周期方法,让开发者更好的控制组建的行为。组建的生命周期被分为三个阶段:挂载阶段,更新阶段和卸载阶段。

4.1  挂载阶段:组件被创建,执行初始化,并被挂载到 DOM 中,完成组建的第一次渲染,用到的生命周期方法有:constructor,componentWillMount,render, componenDidMount。

constructor:这是ES 6 class 的构造方法,组件被创建时,会首先调用组件的构造方法。这个构造方法接收一个 props 参数,props 是从父组件中传入的属性对象,如果父组件中没有传入属性而组件自身定义了默认属性,那么这个 props 指向的就是组件的默认属性。你必须在这个方法中首先调用 super(props) 才能保证props被传入组件中。constructor 通常用于初始化组件的state以及绑定事件处理方法等工作。

componentWillMount:这个方法在组件被挂载到DOM前调用,且只会被调用一次。这个方法在实际项目中很少会用到,因为可以在该方法中执行的工作都可以提前到 constructor 中。在这个方法中调用 this.setState 不会引起组件的重新渲染。

render:这是定义组件时唯一必要的方法(组件的其他生命周期方法都可以省略)。在这个方法中,根据组件的props和state返回一个React元素,用于描述组件的 UI,通常 React 元素使用JSX语法定义。需要注意的是,render 并不负责组件的实际渲染工作,它只是返回一个UI的描述,真正的渲染出页面DOM的工作由React自身负责。render 是一个纯函数,在这个方法中不能执行任何有副作用的操作,所以不能在 render 中调用 this.setState,这会改变组件的状态。

componentDidMount:在组件被挂载到 DOM 后调用,且只会被调用一次。这时候已经可以获取到 DOM 结构,因此依赖 DOM 节点的操作可以放到这个方法中。这个方法通常还会用于向服务器端请求数据。在这个方法中调用 this.setState 会引起组件的重新渲染。

4.2  更新阶段:组件被挂载到 DOM 后,组件的 props 或 state 可以引起组件更新。props 引起的组件更新,本质上是由渲染该组件的父组件引起的,也就是当父组件的 render 方法被调用时,组件会发生更新过程,这个时候,组件 props 的值可能发生改变,也可能没有改变,因为父组件可以使用相同的对象或值为组件的 props 赋值。但是,无论 props 是否改变,父组件 render 方法每一次调用,都会导致组件更新。State 引起的组件更新,是通过调用 this.setState 修改组件 state 来触发的。组件更新阶段,依次调用的生命周期方法有:componnentWIllReceiveProps,shouldComponentUpdate,componentWillUpdate,render, componentDidUpdate

componentWillReceiveProps:组件初始化时不调用,组件接收新的props (不管这个 props 是不是和原来的相同,都会接收)时调用。目前不推荐使用。

shouldComponentUpdate:这个方法决定组件是否继续执行更新过程。当方法返回 true 时(true也是这个方法的默认返回值),组件会继续更新过程;当方法返回 false 时,组件的更新过程停止,后续的 componentWillUpdate、render、componentDidUpdate 也不会再被调用。一般通过比较 nextProps、nextState 和组件当前的 props、state 决定这个方法的返回结果。这个方法可以用来减少组件不必要的渲染,从而优化组件的性能。

componentWillUpdate:这个方法在组件 render 调用前执行,可以作为组件更新发生前执行某些工作的地方,一般也很少用到。

注意:shouldComponentUpdate 和 componentWillUpdate 中都不能调用 setState,否则会引起循环调用问题,render 永远无法被调用,组件也无法正常渲染。

componentDidUpdate(prevProps,prevState):组件更新后被调用,可以作为操作更新后的 DOM 的地方。这个方法的两个参数 prevProps、prevState 代表组件更新前的 props 和 state 。

4.3 卸载阶段:组件卸载阶段只有一个生命周期的方法被调用:componentWillUnmount,这个方法在组件被卸载前调用,可以在这里执行一些清理工作,比如清除组件中使用的定时器,清除componentDidMount中手动创建的DOM元素等,以避免引起内存泄漏。

最后注意:只有类组件有生命周期方法,函数组件没有生命周期方法,因此,永远不要在函数组件中使用生命周期方法。

5. 组件 state:组件state必须能代表一个组件 UI 呈现的完整状态集,即组件的任何 UI 改变都可以从state的变化中反映出来;同时,state 还必须代表一个组件UI呈现的最小状态集,即 state 中的所有状态都用于反映组件 UI 的变化,没有任何多余的状态,也不应该存在通过其他状态计算而来的中间状态。state和props又有什么区别呢?state和props都直接和组件的UI渲染有关,它们的变化都会触发组件重新渲染,但props对于使用它的组件来说是只读的,是通过父组件传递过来的,要想修改props,只能在父组件中修改;而state是组件内部自己维护的状态,是可变的。总结一下,组件中用到的一个变量是不是应该作为state可以通过下面的4条依据进行判断:
(1)这个变量是否通过props从父组件中获取?如果是,那么它不是一个状态。
(2)这个变量是否在组件的整个生命周期中都保持不变?如果是,那么它不是一个状态。
(3)这个变量是否可以通过其他状态(state)或者属性(props)计算得到?如果是,那么它不是一个状态。
(4)这个变量是否在组件的render方法中使用?如果不是,那么它不是一个状态。这种情况下,这个变量更适合定义为组件的一个普通属性。

5.1 state 的更新是异步的:调用setState时,组件的state并不会立即改变,setState只是把要修改的状态放入一个队列中,React会优化真正的执行时机,并且出于性能
原因,可能会将多次setState的状态修改合并成一次状态修改。所以不要依赖当前的state,计算下一个state。当真正执行状态修改时,依赖的this.state并不能保证是最新的state,因为React会把多次state的修改合并成一次,这时this.state还是这几次state修改前的state。另外,需要注意的是,同样不能依赖当前的props计算下一个状态,因为props的更新也是异步的。

6. 组件通信:

6.1 组件挂载阶段通行:componentDidMount是执行组件与服务器通信的最佳地方,原因主
要有两个:
(1)在componentDidMount中执行服务器通信可以保证获取到数据时,组件已经处于挂载状态,这时即使要直接操作DOM也是安全的,而componentWillMount无法保证这一点。
(2)当组件在服务器端渲染时(本书不涉及服务器渲染内容),componentWillMount会被调用两次,一次是在服务器端,另一次是在浏览器端,而componentDidMount能保证在任何情况下只会被调用一次,从而不会发送多余的数据请求。

猜你喜欢

转载自www.cnblogs.com/rougan/p/10861571.html