Tag: reactjs

反应 – 改变一个不受控制的input: 我有一个简单的反应组件，我认为它有一个控制input： import React from 'react'; export default class MyForm extends React.Component { constructor(props) { super(props); this.state = {} } render() { return ( <form className="add-support-staff-form"> <input name="name" type="text" value={this.state.name} onChange={this.onFieldChange('name').bind(this)}/> </form> ) } onFieldChange(fieldName) { return function (event) { this.setState({[fieldName]: event.target.value}); } } } export default MyForm; 当我运行我的应用程序时，我得到以下警告：警告：MyForm正在改变一个不受控制的文本types的input。 input元素不应该从非受控状态切换到受控状态（反之亦然）。决定在组件的生命周期中使用受控或非受控input元素我相信我的input是有控制的，因为它有一个值。我想知道我做错了什么？我正在使用React 15.1.0

任何人都可以解释Reacts单向数据绑定和Angular的双向数据绑定之间的区别: 我对这些概念有些模糊，如果我完全在AngularJS和ReactJS中构build相同的ToDo应用程序 – 是什么让React ToDo使用单向数据绑定与AngularJS的双向数据绑定？我明白，反应类似的作品渲染（数据）—> UI。这与Angular有何不同？

React renderToString（）性能和cachingReact组件: 我注意到reactDOM.renderToString()方法在服务器上渲染一个大的组件树时开始明显变慢。背景一点背景。该系统是一个完全同构的堆栈。最高级别的App组件呈现模板，页面，DOM元素和更多的组件。看看反应代码，我发现它呈现~1500个组件（这包括任何简单的dom标记，被视为一个简单的组件， <p>this is a react component</p> 。在开发中，渲染〜1500个部件需要200〜300ms。通过去除一些组件，我能够在〜175-225ms内获得1200个组件。在生产中，〜1500组件上的renderToString需要约50-200ms。时间似乎是线性的。没有一个组件是缓慢的，而是多数的总和。问题这会在服务器上造成一些问题。冗长的方法会导致较长的服务器响应时间。 TTFB比应该高很多。使用api调用和业务逻辑，响应应该是250ms，但是使用250ms的renderToString会增加一倍！对SEO和用户不利。另外，作为一个同步方法， renderToString()可以阻塞节点服务器并备份后续请求（这可以通过使用2个独立的节点服务器来解决：1作为Web服务器，1作为服务来完成呈现反应）。尝试理想情况下，在生产中使用ToString需要5-50ms。我一直在做一些想法，但我不确定最好的方法是什么。想法1：caching组件任何标记为“静态”的组件都可以被caching。通过使渲染标记保持caching， renderToString()可以在渲染之前检查caching。如果它find一个组件，它会自动抓取该string。在高级别组件中执行此操作将保存所有嵌套的子组件的安装。您将不得不用当前的rootIDreplacecaching的组件标记的反应rootID。想法2：标记组件简单/哑巴通过将组件定义为“简单”，反应应该能够在渲染时跳过所有的生命周期方法。 React已经为核心反应dom组件（ <p/> ， <h1/>等）做了这个。将很好扩展自定义组件使用相同的优化。想法3：跳过服务器端渲染组件不需要由服务器返回的组件（没有SEO值）可以简单地在服务器上跳过。一旦客户端加载，将clientLoaded标志设置为true ，并将其传递给强制执行重新呈现。 closures和其他尝试到目前为止我唯一的解决scheme是减less在服务器上呈现的组件数量。我们正在看的一些项目包括： React-dom-stream https://github.com/aickin/react-dom-stream （仍在努力实现这个testing）巴别克内联元素https://babeljs.io/docs/plugins/transform-react-inline-elements/ （看起来这是沿着想法2的线）有没有人遇到类似的问题？ […]

雷德克斯是不是光荣的全球状态？: 所以我一周前开始学习React，我不可避免地遇到了状态问题，以及组件如何与应用程序的其他部分进行通信。我四处搜寻，Redux似乎是本月的味道。我阅读了所有的文档，我认为这实际上是一个非常革命性的想法。这是我的想法：一般认为国家是非常邪恶的，也是编程中的一个大错误。 Redux说，为什么不把它全部集中在一个全局状态树中，你必须发出改变的动作？听起来不错。所有的程序都需要状态，所以让我们把它粘在一个不纯的空间里，只是从里面修改它，所以错误很容易追踪。然后，我们还可以声明性地将各个状态片段绑定到React组件，并让它们自动重绘，一切都很美丽。不过，我对这个整个devise有两个问题。首先，为什么状态树需要是不变的？说我不在乎时间旅行debugging，热重载，并已经在我的应用程序中实现撤消/重做。要做到这一点似乎很麻烦： case COMPLETE_TODO: return [ …state.slice(0, action.index), Object.assign({}, state[action.index], { completed: true }), …state.slice(action.index + 1) ]; 而不是这个： case COMPLETE_TODO: state[action.index].completed = true; 更不用说，我正在制作一个在线白板来学习，每一个状态的改变都可以像在笔画列表中添加笔触一样简单。经过一段时间（数百次笔触）复制整个arrays可能开始变得非常昂贵和耗时。我确定一个全局状态树，它独立于通过动作变异的UI，但是它确实需要是不可变的吗？这样简单的实现有什么问题（非常粗略的草稿，在1分钟内写入）？ var store = { items: [] }; export function getState() { return store; } export function […]

如何使用React和Webpack设置Babel 6阶段0: 我从文档的理解我看到Babel 6现在有三个预置：es2015，反应和stage-x。我读过，我可以像这样在.babelrc设置它们： { "presets": ["es2015", "react", "stage-0"] } 或者直接在package.JSON中如下所示： { …, "version": xxx, "babel": { "presets": ["es2015", "react", "stage-0"] }, …, } 我可以进一步使用webpack这样的babel-loader： loader: 'babel?presets[]=es2015' 我的问题所以要编译一切很好，干净我添加babel-loader ，刚刚更新与Babel6一起工作，到这样的webpackconfiguration： module.exports = function(options) { var jsLoaders = ['babel?presets[]=es2015']; […] loaders: [ { test: /\.js$/, exclude: /node_modules/, loaders: jsLoaders }, { test: /\.jsx$/, exclude: /node_modules/, loaders: […]

ReactJS：放置在子组件上时，onClick处理程序不会触发: 我最近开始与ReactJS 。具体来说，我正在使用react-rails ruby gem和react-bootstrap组件。我有一个关于把onClick事件监听器放在子组件中的问题。正如你可以从下面的代码示例看到的，我有一个父组件，在其render函数中“调用”一个子组件。在这个render函数中，我有React onClick监听器，当它被点击时调用handleToggle 。 ###* @jsx React.DOM ### ToggleIconButton = React.createClass getInitialState: -> toggleOn: false handleToggle: (evt) -> this.setState(toggleOn: !this.state.toggleOn) render: -> `<IconButton onClick={this.handleToggle}>Toggle Button</IconButton>` IconButton = React.createClass render: -> # BsButton and BsGlyphicon are React-Bootstrap components `<BsButton> <BsGlyphicon glyph={this.props.glyph} /> {" " + this.props.text} </BsButton>` 不幸的是，这不符合我的想法。 ToggleIconButton::handleToggle永远不会被调用。相反， […]

ReactNative：如何中心文本？: 如何在ReactNative中横向和纵向放置文本？我在rnplay.org中有一个示例应用程序，其中justifyContent =“center”和alignItems =“center”不工作： https ： //rnplay.org/apps/AoxNKQ 文本应该居中。为什么文本（黄色）和父容器之间的顶部有空白？码： 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, Image, View, } = React; var SampleApp = React.createClass({ render: function() { return ( <View style={styles.container}> <View style={styles.topBox}> <Text style={styles.headline}>lorem ipsum{'\n'}ipsum lorem lorem</Text> </View> <View style={styles.otherContainer}> </View> </View> ); } }); var styles = […]

有没有可能使用React而不呈现HTML？: 我想知道是否有可能使用React做逻辑和发送数据回到一个JavaScript函数，而不呈现任何HTML。我正在考虑的组件是将某些数据传递给它，并将数据发送回javascript函数以外的反应。我知道这是可以做到的，而且我自己也完成了这个部分，但是我不知道如何在没有呈现html的情况下做到这一点。这甚至是反应的实际用例吗？

React.js：设置innerHTML vs dangerouslySetInnerHTML: 是否有任何“幕后”的差异，从设置元素的innerHTML与设置元素危险的SetInnerHTML属性？为了简单起见，假设我正确地清理了东西。例： var test = React.createClass({ render: function(){ return ( <div contentEditable='true' dangerouslySetInnerHTML={{ __html: "Hello" }}></div> ); } }); VS var test = React.createClass({ componentDidUpdate: function(prevProp, prevState){ this.refs.test.innerHTML = "Hello"; }, render: function(){ return ( <div contentEditable='true' ref='test'></div> ); } }); 我做的比上面的例子复杂一些，但总体思路是一样的

如何最小化webpack的包的大小？: 我正在编写一个web应用程序，使用react和webpack作为我的模块webpack器。到目前为止，我的jsx代码非常轻巧，整个文件夹的大小是25 kb。我从bundle.js创build的webpack是2.2 MB。使用-p标志运行优化后，将包减小到700kb，这仍然是非常大的。我已经查看了react.min.js文件，它的大小是130kb。 webpack可能产生这么大的文件，或者我做错了什么？ webpack.config.js var path = require('path'); var webpack = require('webpack'); module.exports = { entry: './public/components/main.jsx', output: { path: __dirname + "/public", filename: 'bundle.js' }, module: { loaders: [{ test: /.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['es2015', 'react'] } }, { test: /\.css$/, loader: "style!css" }] } […]