ReactJS问题集结

发布时间:2019-08-19 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了ReactJS问题集结脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

Issue1:

ajax引入数据,初始化data==null,设置ajax同步async=false可以获取数据,如何在ajax获取结束后render;

Response:

进行条件渲染:根据条件(State)的变化,初始化加载一种情况,数据加载完成后,改变条件(State),渲染另一种情况;

Issue2:

多个同级兄弟组件渲染,如果没有父级标签包裹(ReactJS要求必须有且仅有一个Root节点),如何处理?

Response

不用创建冗余的父级标签,创建一个函数return这些同级组件,在render()函数中返回函数返回值即可;

示例代码:
this.state.data.loading条件判断解决Issue1;
this.renderBody()函数解决Issue2;

 constructor() {
    suPEr()

    // data: [1,2,4,5,6,7,9]
    this.state = {
      data: {
        loading: true
      }
    }
  }

  componentDidmount() {
    setTimeout(() => {
      this.setState({
        data: {
          data: [1, 2, 4, 5, 6, 7, 9]
        }
      })
    }, 3000);
  }


  clickHandler() {
    let index = 2
      , newValue = Date.now() % 9;

    this.setState({
      data: {
        data: [
          ...this.state.data.data.slice(0, index),
          newValue,
          ...this.state.data.data.slice(index + 1)
        ]
      }
    })

    this.state.data.data[index] = newValue;
    this.forceUpdate()
  }
  
  
  renderBody() {
    return (
      <div>
        {
          _.map(this.state.data.data, (v, i) => <div key={i} style={{ color: v % 2 === 0 ? 'red' : 'green' }}>{v}</div>)
        }
      </div>
    )
  }
  
render() {
    return (
      <div>
        {
          this.state.data.loading
            ? <Loading />
            : this.renderBody()
        }
      </div>
    )
  }

Issue3:

ES6如何实现按需加载?

Response

React不必需要按需加载,封装成组件,在不需要的时候根本就不会下载该组件和该组件的依赖;

Issue4:

React实现服务器端渲染?需要在服务器端(nodejs)运行js,使用renderToStati@R_526_1512@up()将组件返回字符串,前端如何获取并转成组件?

Response

React没有需求实现服务器端渲染,如果要求SEO,则可以后台脚本实现静态化,效率等各方面比React好很多;

Issue5:

数据从父组件一层层传下来,如何精准快速的查找到哪个组件定义的state;

Response

Flux或者Redux架构;

Issue6:

生命周期的使用情况;

Response

尽可能的不要使用生命周期,唯一常用的是componentDidMount();

Issue7:

Jest测试有必要么;

Response

实现交互函数的测试即可,页面显示通过看效果即可测试;

Issue8:

this.state.PRoperty=val和setState()都可以改变state数据,它们有什么区别?

Response

使用this.state.property=val改变state数据,需要使用forceUpdate()强制渲染,渲染时会销毁原有的State对象并创建新的(复制原对象并更新this.state.property的值),而不是对原有State对象的更改;

Issue9:

React初始化State对象时

this.state = {
  data: {
    data: [1, 2, 4, 5, 6, 7, 9],
    loading:true
  }
}

通过:

this.setState({
  data:{
    loading:false
  }
})

并不会重新渲染,ReactJS检测this.state.data的改变,即State对象顶层属性名的值的改变,这里改变的是this.state.data.loading的结果

Response

this.setState({
  data: {
    data: [
      ...this.state.data.data.slice(0, index),
      newValue,
      ...this.state.data.data.slice(index + 1)
    ]
  }
})

通过重新组装this.state.property对象并赋值,引发View的重新渲染;

Issue10:

React会把State状态更新操作放在一起,批量执行,是如何执行的?
不同生命周期的State状态更新是在渲染阶段一起,依次执行,还是在该生命周期方法结束后执行,每个生命周期都是独立的;

Response

首先,不推荐频繁的使用生命周期函数;
其次,在生命周期函数中调用this.setState()函数,ReactJS会将this.setState()加入队列中,优先执行完自定义的脚本后,执行State对象的更新;每个生命周期都是独立的;

注意:在componentWillMount()函数中调用this.setState()函数没有意义,这时没有进行渲染,还没有DOM节点,无法进行数据的更新——数据的更新需要在渲染完DOM后进行;

Issue11:

react-router怎么用;

Response

引入依赖:
import { Router, Route, hashHistory } from 'react-router'

Router的使用:

render(
  <Router history={hashHistory}>
    <Route path="/" component={MainView} />
    <Route path="/detail" component={Detail} />
  </Router>
  , document.getElementById('container')
)

-----------
引入依赖:
import { Link } from 'react-router'

Router的使用:


render() {
    return (
      <div>
        <Link to="/detail">Detail</Link>
        <a href="#/detail">Detail2</a>
      </div>
    )
}

-----------

也可以在函数中使用Location.href.push("/detail")进行跳转;

脚本宝典总结

以上是脚本宝典为你收集整理的ReactJS问题集结全部内容,希望文章能够帮你解决ReactJS问题集结所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。