• 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能保证在任何情况下只会被调用一次,从而不会发送多余的数据请求。

     7. 路由:一般在项目中建立两个文件夹,非路由组件文件夹(components)和路由组件文件夹(pages 或者 views)。

    7.1 嵌套路由的写法:a. 编写路由组件;b. 在父路由中指定路由链接 <NavLink> 或 <Link> 和 路由 <Route>。注意在导入组件的时候,注意区分默认组件和普通组件的导入方法的不同,一旦混淆两者的导入方法,就会报错。

    7.2 路由通信(路由组件之间传递数据):子路由接收的是一个 params 参数。该参数在 path 中,冒号后面的内容就是参数。Route 中的 path 会和 link 里面的 to 比较得出参数 parmas。那么子路由的内容,可以通过读取不同的 params 值,来显示,不同的内容。

    8. redux:

  • 相关阅读:
    微信第三方平台开发之代小程序实现业务
    解决Chrome网页编码显示乱码的问题
    .Net Core 使用 System.Drawing.Common 在CentOS下报错
    CentOS安装nmap端口查看工具
    解决Nginx反向代理不会自动对特殊字符进行编码的问题 如gitblit中的~波浪线
    Centos7最小安装化后安装图形界面
    手把手教您在 Windows Server 2019 上使用 Docker
    windows10下安装docker报错:error during connect
    git删除远程分支
    linux下shell显示git当前分支
  • 原文地址:https://www.cnblogs.com/rougan/p/10861571.html
Copyright © 2020-2023  润新知