Commit 2bb644ad authored by petehunt's avatar petehunt Committed by Sindre Sorhus

React - Feedback from reviews

parent d456aeb1
......@@ -3,7 +3,7 @@
"version": "0.0.0",
"dependencies": {
"todomvc-common": "~0.1.7",
"react": "~0.4.0",
"react": "~0.5.1",
"director": "~1.2.0"
}
}
......@@ -9,5 +9,6 @@
"commit": "538dee97b0d57163d682a397de674f36af4d16a1"
},
"_source": "git://github.com/flatiron/director.git",
"_target": "~1.2.0"
"_target": "~1.2.0",
"_originalSource": "director"
}
\ No newline at end of file
{
"name": "react",
"version": "0.4.0",
"version": "0.5.1",
"main": "react.js",
"homepage": "https://github.com/facebook/react-bower",
"_release": "0.4.0",
"_release": "0.5.1",
"_resolution": {
"type": "version",
"tag": "v0.4.0",
"commit": "54334ad626d26dff4c214d308cefd30ad80fb8e9"
"tag": "v0.5.1",
"commit": "a05207f36d769b99e6b594f71671ca5bd2514435"
},
"_source": "git://github.com/facebook/react-bower.git",
"_target": "~0.4.0"
"_target": "~0.5.1",
"_originalSource": "react"
}
\ No newline at end of file
{
"name": "react",
"version": "0.4.0",
"version": "0.5.1",
"main": "react.js"
}
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"name": "todomvc-common",
"version": "0.1.8",
"homepage": "https://github.com/tastejs/todomvc-common",
"_release": "0.1.8",
"_resolution": {
"type": "version",
"tag": "v0.1.8",
"commit": "3caa4d6f6de2223b10bfc62065ed8da86a29af89"
},
"_source": "git://github.com/tastejs/todomvc-common.git",
"_target": "~0.1.7",
"_originalSource": "todomvc-common"
}
\ No newline at end of file
......@@ -12,7 +12,7 @@
<div id="benchmark"></div>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/react/react.min.js"></script>
<script src="bower_components/react/react.js"></script>
<script src="bower_components/react/JSXTransformer.js"></script>
<script src="bower_components/director/build/director.min.js"></script>
......
......@@ -61,6 +61,9 @@
toggleAll: function (event) {
var checked = event.target.checked;
// Note: it's usually better to use immutable data structures since they're easier to
// reason about and React works very well with them. That's why we use map() and filter()
// everywhere instead of mutating the array or todo items themselves.
var newTodos = this.state.todos.map(function (todo) {
return Utils.extend({}, todo, {completed: checked});
});
......@@ -68,12 +71,9 @@
this.setState({todos: newTodos});
},
toggle: function (todo) {
var newTodos = this.state.todos.map(function (t) {
if (t !== todo) {
return t;
}
return Utils.extend({}, t, {completed: !todo.completed});
toggle: function (todoToToggle) {
var newTodos = this.state.todos.map(function (todo) {
return todo !== todoToToggle ? todo : Utils.extend({}, todo, {completed: !todo.completed});
});
this.setState({todos: newTodos});
......@@ -95,12 +95,9 @@
});
},
save: function (todo, text) {
var newTodos = this.state.todos.map(function (t) {
if (t !== todo) {
return t;
}
return Utils.extend({}, t, {title: text});
save: function (todoToSave, text) {
var newTodos = this.state.todos.map(function (todo) {
return todo !== todoToSave ? todo : Utils.extend({}, todo, {title: text});
});
this.setState({todos: newTodos, editing: null});
......@@ -152,9 +149,9 @@
);
}, this);
var activeTodoCount = this.state.todos.filter(function (todo) {
return !todo.completed;
}).length;
var activeTodoCount = this.state.todos.reduce(function(accum, todo) {
return todo.completed ? accum : accum + 1;
}, 0);
var completedCount = this.state.todos.length - activeTodoCount;
......
......@@ -39,15 +39,15 @@
</span>
<ul id="filters">
<li>
<a href="#/" class={show[ALL_TODOS]}>All</a>
<a href="#/" className={show[ALL_TODOS]}>All</a>
</li>
{' '}
<li>
<a href="#/active" class={show[ACTIVE_TODOS]}>Active</a>
<a href="#/active" className={show[ACTIVE_TODOS]}>Active</a>
</li>
{' '}
<li>
<a href="#/completed" class={show[COMPLETED_TODOS]}>Completed</a>
<a href="#/completed" className={show[COMPLETED_TODOS]}>Completed</a>
</li>
</ul>
{clearButton}
......
......@@ -54,6 +54,12 @@
return {editText: this.props.todo.title};
},
/**
* This is a completely optional performance enhancement that you can implement
* on any React component. If you were to delete this method the app would still
* work correctly (and still be very performant!), we just use it as an example
* of how little code it takes to get an order of magnitude performance improvement.
*/
shouldComponentUpdate: function (nextProps, nextState) {
return (
nextProps.todo.id !== this.props.todo.id ||
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment