标签: render

我有一个组件，其状态作为道具传递给子组件。我注意到即使父组件的状态发生变化，子组件也不会重新渲染。

基于使用 shouldComponentUpdate 的官方 React 文档：

“第一次渲染内部组件时，它将使用 { foo: 'bar' } 作为 value 属性。如果用户单击锚点，父组件的状态将更新为 { value: { foo: 'barbar' } }，触发内部组件的重新渲染过程，它将接收 { foo: 'barbar' } 作为 prop 的新值。

问题在于，由于父组件和内部组件共享对同一对象的引用，因此当该对象在 onClick 函数的第 2 行发生变异时，内部组件所拥有的 prop 将发生变化。因此，当重新渲染过程开始并且调用shouldComponentUpdate时，this.props.value.foo将等于nextProps.value.foo，因为事实上，this.props.value引用与nextProps.value相同的对象。

因此，由于我们会错过道具上的更改并缩短重新渲染过程，因此 UI 不会从“bar”更新为“barbar”。”

如果我不能使用 shouldComponentUpdate，我将如何强制子组件根据父组件的 props 更改重新渲染？

父组件

我希望子组件根据给 showDropzone 的布尔值重新渲染。

     <Dropzone 
      onDrop={this.onDrop} 
      clearFile = {this.clearFile}
      showDropzone = {this.state.filePresent}/>

子组件

export default class Dropzone extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { onDrop } = this.props;
    const {showDropzone} = this.props;
    const {clearFile} …

我在尝试使用 React 渲染 HTMLDivElement 时遇到了这个问题，但是出现以下错误：

Uncaught Invariant Violation: Objects are not valid as a React child (found: [object HTMLDivElement]). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `VirtualList`

在我的 React Component 类中，我有这段代码......

import React, { Component } from 'react';

export default class VirtualList extends Component {

    constructor(props) {
        super(props);

        this.container = document.createElement('div');
    }

    renderList() {
        let container = this.container;

        // …

我有一种在 WPF 中测量 FPS 的方法（我真的不知道这是否是正确的测量方法）。

CompositionTarget.Rendering += CompositionTarger_Rendering;

void CompositionTarget_Rendering(object sender, EventArgs e)
{
    var args = (RenderingEventArgs)e;
    if(args.RenderingTime == m_Last)
    {
        return;
    }
    m_Last = args.RenderingTime;

    DoingFpsCalculations(); // This method adds to a counter and reports each elapsed second what the counter is => FPS
}

这些计算显示我的帧速率约为 40-60 FPS

然而，有时我可以直观地看到事实并非如此。FPS 计数器报告称 50FPS，但 UI 绝对会在较低的 FPS 下更新。

例如，我有一个以 15Hz 运行的 DispatcherTimer，计时器调用渲染方法并更新绑定到其 RenderTransform 的 ui 元素的转换。定时器以 15Hz 的频率被调用并及时完成其计算。FPS 显示为 40-60 fps，但 UI 元素绝对仅在 4-6 FPS 内更新。

我可以依靠什么？

我知道 UI 线程和渲染线程之间存在差异，因此真正的 FPS …

我试图从反应函数中动态返回一个div。我在组件渲染函数中调用一个函数直接渲染出来，但它没有渲染出来。我确信这是代码中的一个简单错误，但我无法发现它。

代码：

import React, { Component } from \'react\'\n\nimport ProgressBar from \'./ProgressBar\'\n\nrequire(\'styles/_servicesPage/priceCalc.css\')\n\nexport default class PriceCalculator extends Component {\n\n  componentWillMount() {\n    this.state = {\n      arr: []\n    }\n  }\n\n  minimizeDiv() {\n    this.props.toggleDiv(false)\n  }\n\n\n  returnDiv(){\n    return\n      <div>\n        <p>\n          Printing out text!\n        </p>\n      </div>\n  }\n\n  render() {\n    var styleVar = {\n      backgroundImage: \'url(assets/images/services/pricecalc_blue_bg.svg)\',\n      backgroundPosition: \'right center\'\n    }\n\n    return (\n      <div className="service-form" id="priceCalc" style={styleVar}>\n\n        <div>\n          <h1>Priskalkyl f\xc3\xb6r badrum</h1>\n          <p>\n            V\xc3\xa4lkommen att fylla i formul\xc3\xa4ret,\n            s\xc3\xa5 \xc3\xa4r du ett steg n\xc3\xa4rmare dina dr\xc3\xb6mmars badrum.\n …

我正在使用 express.js 的 res.render 函数，但在设置自定义标头时遇到了一些问题，我尝试了 4 种方法，但都失败了

这是我的代码

方法一

app.get('/login', function(req, res, next) {
  res.writeHead(200, {'Content-Type':'text/plain; charset=utf-8'});
  next()
});

app.get('/login', function(req, res) {
  res.locals.text="hello";  
  res.render('index');
});

它有一个带有以下代码的错误日志： Error: Can't set headers after they are sent.

方法 2（来自此处的示例）

app.get('/login', function(req, res, next) {
  res.header(200, {'Content-Type':'text/plain; charset=utf-8'});
  next()
});

app.get('/login', function(req, res) {
  res.locals.text="hello";
  res.render('index');
});

该代码带有错误： TypeError: field.toLowerCase is not a function

方法三

app.get('/login', function(req, res) {
  res.writeHead(200, {'Content-Type': 'application/xhtml+xml; charset=utf-8'});
  res.locals.text="hello";
  res.render('index');
});

代码也有错误： Error: Can't set headers …

这是我的 people.js 文件。它包含两个人的数据。

var Data = [
        {
            "gender": "male",
            "name": {
              "title": "mr",
              "first": "ruben",
              "last": "dean"
            },
            "location": {
              "street": "3070 york road",
              "postcode": "LP0 5PG"
            },
            "email": "ruben.dean@example.com",
            "login": {
              "username": "crazydog764",
              "password": "kane",
              "sha256": "58841f853bffca51507549428aee2a6c14863c8219e5a4b563d58a5b97564c92"
            },
            "picture": {
              "large": "https://randomuser.me/api/portraits/men/96.jpg",
              "thumbnail": "https://randomuser.me/api/portraits/thumb/men/96.jpg"
            },
            "nat": "GB"
        },
        {
            "gender": "male",
            "name": {
              "title": "mr",
              "first": "daniel",
              "last": "king"
            },
            "location": {
              "street": "7618 taylor st",
              "postcode": 35059
            },
            "email": "daniel.king@example.com",
            "login": {
              "username": "silvergorilla983",
              "password": "1a2b3c4d",
              "sha256": …

我正在构建一个RailsAPI，我想知道是否有办法返回我的对象​​的属性，但我不想返回所有属性。有没有办法阻止某些属性被返回？例如，我不想返回数据库 ID 或时间戳

祝你今天过得愉快。

我有 2 个反应组件。第一个组件是项目列表。第二个组件是代表项目的组件。

第一个组件在生命周期方法中从服务器获取数据componentDidMount。当您第一次到达此页面时，会显示 20 项。该页面还有一个“显示更多”按钮。当用户单击该按钮时，会获取另外 20 条数据。

让我们承认用户单击了该按钮。现在显示 40 个项目。

用户可以单击某个项目，然后重定向到包含该项目详细信息的另一个页面。

我的问题是，当用户单击后退浏览器按钮（返回到项目列表）时，组件会重新渲染并仅显示 20 个项目。先前的状态（包含 40 项）将丢失。

我想要的是，如果当前状态有 40 个项目，并且用户单击其中之一（以查看详细信息页面），当他返回（通过浏览器导航）时，始终在他离开之前向他显示相同的列表到详情页面。

换句话说，从详情页面导航到列表页面，不得重新渲染列表页面。

我希望我的解释足够清楚。

谢谢。

我有一个非常大的对象数组，其中包含大量数据要由组件中的 Vue 渲染到 DOM，我想最好的方法是仅渲染将可见的 HTML，例如，如果每个组件高度为 100 像素，组件容器高度为 1000 像素，一次只能渲染 10 个组件；直到用户向下或向上滚动，并以一种 FIFO 方式（先进先出）渲染和“取消渲染”相应的元素。

所以我想知道的是：这是最好的方法吗？，可以通过使用一个包含 10 个对象的数组来解决，并将 100px 添加到容器的高度（在容器的底部和顶部放置额外的 50px )，因此当用户在该额外空间中滚动时执行 fifo 操作，另一种解决方案是为每个组件提供计算能力（借助 window 对象），如果可见，然后呈现自身（使用 v-显示指令）。我不知道。

（好吧，这个问题是指列表的动态呈现，而不是动态组件或动态组件的动态负载）。

任何想法、方法、标准或技术都会非常有用！

var app = new Vue({
  el: '#app',
  data: {
    users: Array(1000).fill({
      gender: "male",
      name: {
        title: "mr",
        first: "vincent",
        last: "ouellet"
      },
      location: {
        street: "6963 disputed rd",
        city: "brockton",
        state: "yukon",
        postcode: "Z4J 0J2",
        coordinates: {
        latitude: "-60.8550",
        longitude: "-36.0196"
      },
      timezone: {
        offset: "+3:30",
        description: "Tehran"
      }
      },
      email: "vincent.ouellet@example.com",
      login: …

我有一个 Three.js 项目，其中包含 3D 模型、地面和网格。使用outlinePass ( https://trijs.org/examples/?q=outl#webgl_postprocessing_outline )勾勒出3D 模型的轮廓。

我可以使用 Transformcontrol ( https://thirdjs.org/examples/?q=transf#misc_controls_transform ) 移动对象，并且可以使用 Orbitcontrols 更改相机位置 ( https://thirdjs.org/examples/?q=轨道#misc_controls_orbit）

问题：图形似乎渲染得很糟糕，这里有一些屏幕截图： https: //i.stack.imgur.com/QxjrZ.jpg

我真的不知道应该在这里使用哪些设置：

    renderer = new THREE.WebGLRenderer();//{ antialias: true } ); With antialiasing or without?
                                 //antialiasing is only needed when not using fxaa, right??
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            renderer.gammaOutput = true;
            renderer.physicallyCorrectLights = true;

    camera = new THREE.PerspectiveCamera( 45, container.offsetWidth / container.offsetHeight, 0.001, 1000 );
    camera.addEventListener( 'change', render ); //Is this necessary? Seems like it …