ReactJS使用中常见的问题整理

w848986@qq.com

本文和大家分享的主要是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()

　　}

　　render() {

　　return (

　　

　　{

　　this.state.data.loading

　　?

　　: this.renderBody()

　　}

　　

　　)

　　}

　　Issue3：

　　ES6如何实现按需加载？

　　Response

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

　　Issue4：

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

　　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">DetailLink>

　　<a href="#/detail">Detail2a>

　　div>

　　)

　　}

　　-----------

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

来源：SegmentFault