小编Ric*_*ior的帖子

我在http://www.youtube.com/watch?v=x7cQ3mrcKaY上看到了React dev的演讲,并且发言人提到模型的脏检查可能很慢.但是,由于虚拟DOM在大多数情况下应该比模型更大,所以虚拟DOM之间的差异实际上并不是很差.

我非常喜欢Virtual DOM的潜在力量(特别是服务器端渲染),但我想知道所有的优点和缺点.

它似乎componentWillReceiveProps将在即将发布的版本中完全淘汰,支持新的生命周期方法getDerivedStateFromProps.

https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops

经过检查,看起来你现在无法在this.props和nextProps你之间进行直接比较componentWillReceiveProps.有没有办法解决？

此外,它现在返回一个对象.我是否正确地假设返回值基本上是this.setState？

以下是我在网上找到的一个例子 https://github.com/reactjs/rfcs/blob/master/text/0006-static-lifecycle-methods.md#state-derived-from-propsstate

之前

class ExampleComponent extends React.Component {
  state = {
    derivedData: computeDerivedState(this.props)
  };

  componentWillReceiveProps(nextProps) {
    if (this.props.someValue !== nextProps.someValue) {
      this.setState({
        derivedData: computeDerivedState(nextProps)
      });
    }
  }
}

后

class ExampleComponent extends React.Component {
  // Initialize state in constructor,
  // Or with a property initializer.
  state = {};

  static getDerivedStateFromProps(nextProps, prevState) {
    if (prevState.someMirroredValue !== nextProps.someValue) {
      return {
        derivedData: computeDerivedState(nextProps),
        someMirroredValue: nextProps.someValue
      }; …

我们的应用程序使用无限滚动来导航异类项目的大型列表.有一些皱纹:

• 我们的用户通常拥有10,000个项目的列表,需要滚动3k +.
• 这些是丰富的项目,因此在浏览器性能变得不可接受之前,我们只能在DOM中使用几百个.
• 这些物品的高度各不相同.
• 这些项目可能包含图像,我们允许用户跳转到特定日期.这很棘手,因为用户可以跳转到列表中我们需要在视口上方加载图像的位置,这会在加载时推送内容.未能处理这意味着用户可能会跳转到某个日期,但随后会转移到更早的日期.

已知的不完整解决方案:

• https://github.com/guillaumervls/react-infinite-scroll - 这只是一个简单的"当我们触及底部时加载更多"组件.它不会剔除任何DOM,因此会死于数千个项目.

• http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html - 显示如何在顶部插入或插入底部时存储和恢复滚动位置,但不能同时插入.

我不是在寻找完整解决方案的代码(虽然那会很棒.)相反,我正在寻找"反应方式"来模拟这种情况.滚动位置是否状态？我应该跟踪什么状态来保留我在列表中的位置？当我在渲染的底部或顶部附近滚动时,我需要保持什么状态才能触发新的渲染？

这是来自Google Adsense应用程序页面的示例.主页面显示之前显示的加载屏幕.

我不知道如何使用React做同样的事情,因为如果我使用React组件呈现加载屏幕,则在页面加载时它不会显示,因为它必须等待之前呈现的DOM.

更新:

我通过index.html在React componentDidMount()生命周期方法中放入屏幕加载器并将其删除来举例说明我的方法.

示例:https: //nguyenbathanh.github.io

来源:https: //github.com/nguyenbathanh/react-loading-screen

我正在尝试在ReactJS组件中使用event.stopPropagation()来阻止点击事件冒泡并触发遗留代码中使用JQuery附加的单击事件,但似乎React的stopPropagation()仅停止传播到事件也附加在React中,而JQuery的stopPropagation()不会停止传播到React附带的事件.

有没有办法让stopPropagation()在这些事件中发挥作用？我写了一个简单的JSFiddle来演示这些行为:

http://jsfiddle.net/7LEDT/3/

/** @jsx React.DOM */
var Propagation = React.createClass({
    alert: function(){
        alert('React Alert');
    },
    stopPropagation: function(e){
        e.stopPropagation();
    },
    render: function(){
        return (
            <div>
                <div onClick={this.alert}>
                    <a href="#" onClick={this.stopPropagation}>React Stop Propagation on React Event</a>
                </div>
                <div className="alert">
                    <a href="#" onClick={this.stopPropagation}>React Stop Propagation on JQuery Event</a>
                </div>
                <div onClick={this.alert}>
                    <a href="#" className="stop-propagation">JQuery Stop Propagation on React Event</a>
                </div>
                <div className="alert">
                    <a href="#" className="stop-propagation">JQuery Stop Propagation on JQuery Event</a>
                </div>
            </div>
        );
    }
});

React.renderComponent(<Propagation />, document.body);

$(function(){    
    $(document).on('click', '.alert', function(e){ …

我刚刚发现,在this.setState()任何组件中的react 函数是异步的,或者在调用它的函数完成后调用.

现在我搜索并找到了这个博客(http://www.bennadel.com/blog/2893-setstate-state-mutation-operation-may-be-synchronous-in-reactjs.htm)

在这里,他发现setState异步(在堆栈为空时调用)或同步(调用后立即调用)取决于触发状态变化的方式.

现在这两件事很难消化

1. 在博客中,setState函数在函数内部被调用updateState,但触发updateState函数的内容并不是被调用函数所知道的.
2. 为什么他们setState像JS一样异步是单线程语言,这个setState不是WebAPI或服务器调用,所以必须只在JS的线程上完成.他们是这样做的,以便重新渲染不会停止所有事件监听器和东西,或者存在其他一些设计问题.

TLDR:使用defaultChecked而不是checked,在这里工作jsbin http://jsbin.com/mecimayawe/1/edit?js,output

尝试设置一个简单的复选框,在选中时会勾选其标签文本.出于某种原因,当我使用该组件时,handleChange不会被触发.谁能解释我做错了什么？

var CrossoutCheckbox = React.createClass({
  getInitialState: function () {
    return {
        complete: (!!this.props.complete) || false
      };
  },
  handleChange: function(){
    console.log('handleChange', this.refs.complete.checked); // Never gets logged
    this.setState({
      complete: this.refs.complete.checked
    });
  },
  render: function(){
    var labelStyle={
      'text-decoration': this.state.complete?'line-through':''
    };
    return (
      <span>
        <label style={labelStyle}>
          <input
            type="checkbox"
            checked={this.state.complete}
            ref="complete"
            onChange={this.handleChange}
          />
          {this.props.text}
        </label>
      </span>
    );
  }
});

用法:

React.renderComponent(CrossoutCheckbox({text: "Text Text", complete: false}), mountNode);

解:

使用checked不会让底层值发生变化(显然),因此不会调用onChange处理程序.切换到defaultChecked似乎解决了这个问题:

var CrossoutCheckbox = React.createClass({
  getInitialState: function () {
    return {
        complete: (!!this.props.complete) || false
      }; …

我是React/Redux的新手.我在Redux应用程序中使用fetch api中间件来处理API.这是https://github.com/agraboso/redux-api-middleware.我认为这是处理异步api操作的好方法.但我发现一些自己无法解决的案例.

作为主页https://github.com/agraboso/redux-api-middleware#lifecycle比如说,一个取API生命周期开始派遣CALL_API行动派遣FSA行动结束.

所以我的第一个案例是在获取API时显示/隐藏预加载器.中间件将在开始时发送FSA操作,并在最后发送FSA操作.这两个动作都是由减速器接收的,减速器应该只进行一些正常的数据处理.没有UI操作,没有更多操作.也许我应该将处理状态保存在状态中,然后在存储更新时呈现它们.

但是怎么做呢？一个反应组件流过整个页面？从其他操作更新商店会发生什么？我的意思是他们更像是事件而非国家!

即使是更糟糕的情况,当我必须在redux/react应用程序中使用本机确认对话框或警报对话框时,我该怎么办？它们应该放在哪里,行动还是减少？

最好的祝愿!希望回复.

我想生成随机唯一字符串,如MSDN库生成的字符串:

例如,http://msdn.microsoft.com/en-us/library/t9zk6eay.aspx.应生成类似't9zk6eay'的字符串.

在React呈现该元素后,如何获得元素的高度？

HTML

<div id="container">
<!-- This element's contents will be replaced with your component. -->
<p>
jnknwqkjnkj<br>
jhiwhiw (this is 36px height)
</p>
</div>

ReactJS

var DivSize = React.createClass({

  render: function() {
    let elHeight = document.getElementById('container').clientHeight
    return <div className="test">Size: <b>{elHeight}px</b> but it should be 18px after the render</div>;
  }
});

ReactDOM.render(
  <DivSize />,
  document.getElementById('container')
);

结果

Size: 36px but it should be 18px after the render

它正在计算渲染前的容器高度(36px).我想在渲染后获得高度.在这种情况下,正确的结果应该是18px.

https://jsfiddle.net/69z2wepo/29800/