react

作者: mujimz_小东 | 来源:发表于2020-07-24 13:40 被阅读0次
    • 动态生成的元素,需要唯一父元素,如果父元素没有意义,用什么作为父元素比较合适
    <Fragment></Fragment> 
    <></>
    
    • 更新页面有哪些方式
    state改变
    props改变
    context改变
    
    • 单页面为了保证类名称唯一,防止不同文件类名冲突,启用什么样式方案来解决类名称污染。
    CSS Modules
    文件名+hash值
    
    • react中在使用es6时,通过什么方式兼容老版本浏览器
    babel转化
    
    • 有一个数组,用什么方式来动态生成元素
    map()
    
    • 何时使用无状态组件和有状态组件
    当组件需要自身维护自己的状态时,用有状态组件,如tab组件
    当组件不需要自己维护状态,页面只由外部属性变化来更新时,使用无状态组件
    
    • react 生命周期 新生命周期方法
    • getDerivedStateFromProps和componentWillReceiveProps什么时候会被调用
    错误:当props改变时会调用。
    正确:父组件重新渲染时就会被调用,不管props是否和之前一样。
    解决办法:shouldComponentUpdate中判断。
    ps:shouldComponentUpdate最好作为性能优化使用,而不是为了确保派生状态的正确。
    
    • render中调用了一个比较耗时的循环,有什么办法可以进行优化
    使用第三方组件 memoize-one
    
    • 使用哪些第三方框架
    • 更新页面的方式 (state 改变、props改变、context)
    • setState是异步的,如何在一个state更新后再做另一个操作
    第二个参数是回调
    this.setState({},()=>{})
    

    redux

    1. redux 原理
    2. redux 中间键


      image.png
    • redux-saga 原理
    redux-saga 使用了es6里的Generator功能,让异步流程更易阅读、维护。
    让异步代码看起来像是同步执行,类似于 async/await
    
    • redux-saga 使用 常用方法和使用
    call:同步请求接口,阻塞代码执行;
    put:相当于分发一个action;
    takeEvery:可以同时启动多个请求
    takeLatest:只得到最新的请求的相应。任何时候takeLatest只允许一个fetchRequet任务在执行,并且这个任务是最后被启动的那个,之前的任务会被取消。
    take:阻塞监听action,只会执行一次,如果要一直监听,需要while(true)循环调用。
    fork:无阻塞调用,在fork的第一个参数方法里处理返回值,如果要取消执行 yield cannel(task),类似clearTimeout;
    all:yield all([call api1,call api2])并行请求多个接口,结果都返回后再执行下边代码
    race:只要有一个接口返回结果就执行下边代码,忽略其他接口返回的结果。
    import { race, call, put } from 'redux-saga/effects'
    import { delay } from 'redux-saga'
    
    function* fetchPostsWithTimeout() {
      const {posts, timeout} = yield race({
        posts: call(fetchApi, '/posts'),
        timeout: call(delay, 1000)
      })
    
      if (posts)
        put({type: 'POSTS_RECEIVED', posts})
      else
        put({type: 'TIMEOUT_ERROR'})
    }
    
    
    
    • 页面里dispatch一个action后,等待返回结果,拿着返回结果来更新state,如何实现
    dispatch之后返回的是一个promise函数,可以用then回调
    dispatch().then(){}
    
    • 如何获取另一个命名空间下的state
    yield select(state=>state.namespace.statename);
    
    • yield 和 yield* 的区别
    yield 可以调用saga提供的方法
    yield* 可以调用多个sagas
    

    相关文章

      网友评论

          本文标题:react

          本文链接:https://www.haomeiwen.com/subject/ddydzqtx.html