ReactJS问题集结

lwx12525 发布于2019-08-20 14:21 / 2441人阅读

摘要：引入数据，初始化，设置同步可以获取数据，如何在获取结束后进行条件渲染根据条件的变化，初始化加载一种情况，数据加载完成后，改变条件，渲染另一种情况多个同级兄弟组件渲染，如果没有父级标签包裹要求必须有且仅有一个节点，如何处理不用创建冗余的父级标

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 (
      
        {
          _.map(this.state.data.data, (v, i) => {v})
        }
      
    )
  }
  
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(
  
    
    
  
  , document.getElementById("container")
)

-----------
引入依赖：
import { Link } from "react-router"

Router的使用：


render() {
    return (
      
        Detail
        Detail2
      
    )
}

-----------

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

超融合服务器专线服务双11阿里云服务器压力集结 reactjs reactjs cdn reactjs模板

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81560.html

Reactjs 列表优化的一些心得。

摘要：前言在应用开发中，列表是我们使用频率非常高的一种展现形式，在项目中更是如此。无处不在的使用更是需要我们小心触发性能瓶颈的深水炸弹。不要用索引当值要求我们对列表中的每一项设置一个唯一的值，这个虚拟的算法有很大关系。前言在应用开发中，列表是我们使用频率非常高的一种展现形式，在reactjs项目中更是如此。无处不在的使用更是需要我们小心触发性能瓶颈的深水炸弹。下面就我最近的总结出的几点...

刘玉平 2019-08-22 11:08 评论0 收藏0
ReactJs入门教程

摘要：组件关注的只应该是状态，不同的状态呈现不同的表现形式。组件一切都是组件倡导开发者将切分成一个个组件从而达到松耦合及重用的目的。只不过的命名是进入状态之前跟进入状态之后。前端已不止于前端－ReactJs初体验原文写于 2015-04-15 https://github.com/kuitos/kuitos.github.io/issues/21 要说2015年前端届最备受瞩目的技术是啥...

bingo 2019-08-21 10:42 评论0 收藏0
哈姆雷特之 React

摘要：最近两三周在主要在写，在这里写一下，算是个总结。但是打算换成，它是推荐用或，就这样决定把之前的换成了。这里面主要的问题是作用域。总之也并没有那么难。目前看来确实是非常适合于前后端分离的。最近两三周在主要在写 React，在这里写一下，算是个总结。 webpack 我们的后端语言用的是 Go, 对于写网站来说，Go 并没有好的前端资源（js, css，image）的管理方式(打包，压缩...

?xiaoxiao, 2019-08-19 18:10 评论0 收藏0
ReactJS组件之间通信

摘要：最近在学习，不得不说第一次接触组件化开发很神奇，当然也很不习惯。最近在学习react.js，不得不说第一次接触组件化开发很神奇，当然也很不习惯。react的思想还是蛮独特的，当然围绕react的一系列自动化工具也是让我感觉亚历山大今天总结一下react组件之间的通信，权当是自己的学习笔记： reactJs中数据流向的的特点是：单项数据流 react组件之间的组合不知道为什么给我一种数...

codecook 2019-08-22 10:39 评论0 收藏0
ReactJS 开发过程中的一些使用心得

摘要：目前开发的项目中为了仿原生效果如果自己去通过重新实现的话成本极大所以不得不使用来作为前端库。可以在这个函数中清理在绑定的事件这个方式很有用。在开发过程中这些生命周期函数是我使用最频繁最常见的操作。 ReactJS作为目前最火的构建用户界面的前端框架，为什么有那么多的前端工程师去追逐它，不仅因为它简单，而且它提供了一系列强大的API让我们摆脱以前繁琐的DOM操作，使我们的逻辑更加清晰，代...

MangoGoing 2019-08-22 10:34 评论0 收藏0