Tag: reactjs
Shadow DOM是否像React.js中的虚拟DOM一样快？
在我的项目中实现Shadow DOM会使它们像React使用的虚拟DOM一样快吗？
我应该何时将Redux添加到React应用程序？
我目前正在学习React，并且正在尝试弄清楚如何使用Redux来构build移动应用程序。 我对这两者如何相关/可用在一起感到困惑。 例如，我在React https://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript中完成了这个教程，但是现在我想要在该应用程序中添加一些reducer / actions，我不确定那些将与我已经完成的事情配合。
react.js – 要使用什么扩展名 – “.jsx”或者“.js”？
我只是想弄清楚什么是我的应用程序更好： 使用.jsx扩展，但是我将需要require('MyComponent.jsx'); 使用.js扩展名，这是很好的require('MyComponent); 但是我需要破解Sublime来正确地擦亮它们并突出显示语法。 你有什么经验？
React.js ES6避免将“this”绑定到每个方法
最近，我开始修补React.js，我喜欢它。 我开始在常规的ES5中，以便弄清事情，这些文档都是用ES5编写的。 但是现在我想尝试ES6，因为它有光泽，新颖，而且似乎简化了一些东西。 我感到困扰的是，对于我添加到组件类中的每种方法，我现在都必须绑定“this”，否则它不起作用。 所以我的构造函数最终看起来像这样： constructor(props) { super(props); this.state = { …some initial state… } this.someHandler = this.someHandler.bind(this); this.someHandler = this.someHandler.bind(this); this.someHandler = this.someHandler.bind(this); this.someHandler = this.someHandler.bind(this); this.someHandler = this.someHandler.bind(this); this.someHandler = this.someHandler.bind(this); this.someHandler = this.someHandler.bind(this); } 如果我要给class上添加更多的方法，这将会变得更大，更丑陋。 我的问题是，有没有办法解决这个问题，或者至less让它更容易，更短，更难看？ 我想尝试使用ES6的一个主要原因是为了使我的代码更加简洁，但是正好相反。 任何build议或意见，将不胜感激。
如何使用webpack的笑话？
我使用webpack来开发一个React组件。 这是一个简单的版本： 'use strict'; require('./MyComponent.less'); var React = require('react'); var MyComponent = React.createClass({ render() { return ( <div className="my-component"> Hello World </div> ); } }); module.exports = MyComponent; 现在，我想用jest来testing这个组件。 这里是我的package.json的相关位： "scripts": { "test": "jest" }, "jest": { "rootDir": ".", "testDirectoryName": "tests", "scriptPreprocessor": "<rootDir>/node_modules/babel-jest", "unmockedModulePathPatterns": [ "react" ] } 运行npm test ，出现以下错误： SyntaxError：/Users/mishamoroshko/react-component/src/tests/MyComponent.js：/Users/mishamoroshko/react-component/src/MyComponent.js：/Users/mishamoroshko/react-component/src/MyComponent.less：Unexpected令牌非法 看起来webpack需要先处理require('./MyComponent.less')然后才能运行testing。 我想知道是否需要使用像jest-webpack这样的东西 。 […]
React.js：教程中的示例不工作
我从http://facebook.github.io/react/docs/tutorial.html开始学习React.js教程。 这是我的文件： template.html： <html> <head> <title>Hello React</title> <script src="http://fb.me/react-0.8.0.js"></script> <script src="http://fb.me/JSXTransformer-0.8.0.js"></script> <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script> </head> <body> <div id="content"></div> <script type="text/jsx" src='tut.js'> </script> </body> </html> 和tut.js： /** @jsx React.DOM */ var data = [ {author: 'Tldr', text: 'This is a comment'} ] var CommentBox = React.createClass({ render: function() { return ( <div className='commentBox'> <h1>Comments</h1> <CommentList data={this.props.data} /> […]
反应生命周期方法的理解
我是React.js的新手，我正在努力理解反应生命周期方法中的几个方法。 到目前为止，我还是有一些让我困惑的东西： 1） 据我了解， componentWillUpdate和componentWillReceiveProps之间的区别是，当父母更换道具时， componentWillReceiveProps将被调用，我们可以在componentWillReceiveProps使用setState（setState）。 例如： https ： //github.com/bgerm/react-table-sorter-demo/blob/master/jsx/app.jsx var App = React.createClass({ getInitialState: function() { return {source: {limit: "200", source: "source1"}}; }, handleSourceChange: function(source) { this.setState({source: source}); }, render: function() { return ( <div> <DataSourceSelectors onSourceChange={this.handleSourceChange} source={this.state.source} /> <TableSorter dataSource={urlForDataSource(this.state.source)} config={CONFIG} headerRepeat="5" /> </div> ); } }); 在TableSorter中，我们有 componentWillReceiveProps: function(nextProps) { // Load […]
在js中触发onchange事件的最好方法是什么？
美好的一天。 我们使用backbone + reactjs包来构build客户端应用程序。 严重依赖臭名昭着的valueLink我们通过自己的包装器直接向模型传递值，支持反应js接口的双向绑定。 现在我们面临这个问题： 我们有jquery.mask.js插件，它以编程方式格式化input值，因此它不会触发React事件。 所有这些都会导致模型从用户input中接收到未格式化的值，并从插件中忽略格式化的值。 看来，React有很多事件处理策略取决于浏览器。 有什么常见的方法来触发特定DOM元素的更改事件，以便React能够听到它？
使用React-Router和布局页面或每页多个组件
我正在添加反应路由器到现有的项目。 目前，一个模型被传递给一个根组件，该组件包含一个用于子导航的导航组件和一个主要组件。 我发现的反应路由器的例子只有一个子组件，有多个子组件改变而不重复布局代码的最好方法是什么？
反应PropTypes与stream量
PropTypes和Flow涵盖了类似的东西，但是使用了不同的方法。 PropTypes可以在运行时给你警告，这可以帮助你快速find来自服务器的错误响应等等。然而，Flow似乎是未来，像generics这样的概念是一个非常灵活的解决scheme。 Nuclide提供的自动完成function也是Flow的一大优点。 现在我的问题是，在开始一个新项目时，最好的办法是走哪条路。 或者使用Flow和PropTypes可以是一个很好的解决scheme吗？ 使用两者的问题是你写了很多重复的代码。 这是我写的音乐播放器应用程序的一个例子： export const PlaylistPropType = PropTypes.shape({ next: ItemPropTypes, current: ItemPropTypes, history: PropTypes.arrayOf(ItemPropTypes).isRequired }); export type Playlist = { next: Item, current: Item, history: Array<Item> }; 两个定义基本上都包含相同的信息，当数据types改变时，两个定义都需要更新。 我发现这个babel插件将types声明转换为PropTypes，这可能是一个解决scheme。
