React??????????

?????????????????????? React ??????????????????????????????????????????? React ???????????????????????????????????????????????????????????????????React ?????Щ?????????? UI ??????????????? DOM ??????
??????? production ?汾
?????????????? React app ?н?????????????????????????????????????? minified production build????????汾?????????????????????????????? app ??????????????????????ж???????????????????????
??????????? DOM
????React ??????? DOM??????????????е? DOM ????????????????????е??????? React ??????????? DOM ?????Щ????????? JavaScript ?????????????????? props ?? state ???React ????????μ????? DOM ??????ж??????????? DOM ???μ???????????????????????React ?????t???????????? DOM??
???????????React ???????????????? shouldComponentUpdate????????????????·?????? DOM ???? DOM ???￡??????????????迪??????????????????????????????????? true???? React ??и????
????shouldComponentUpdate: function(nextProps?? nextState) {
????return true;
????}
?????????????React ??????????????????????????????????????????
???????????и????ж?????????????????????????????????????????? ChatThread ?????? shouldComponentUpdate??React ???????????????????????????衣
????shouldComponentUpdate: function(nextProps?? nextState) {
????// TODO: return whether or not current chat thread is
????// different to former one.
????}
??????????????React ??????????? shouldComponentUpdate ?????????????·????????а??????? DOM ?????????????????Щ???????￡??????????? DOM??
????shouldComponentUpdate ??
?????????и??????????????????????? shouldComponentUpdate ??????????? DOM ?????????????????????????????????
???????????????У???? C2 ?? shouldComponentUpdate ???? false??React ??????????μ????? DOM???????????? DOM????? React ????????????? C4 ?? C5 ?? shouldComponentUpdate??
????C1 ?? C3 ?? shouldComponentUpdate ???? true?????? React ??????μ?????????????C6 ???? true????????? DOM ????????????? DOM???????????? C8????????????React ??????????? DOM??????????????????????????????? DOM??
??????? React ?????? C6 ???? DOM ?????????????????? C8????????? DOM ??????????????????C2 ???????? C7??????????????????????? DOM????? shouldComponentUpdate??
??????????????????? shouldComponentUpdate ?????????????????????????????????:
????React.createClass({
????propTypes: {
????value: React.PropTypes.string.isRequired
????}??
????render: function() {
????return <div>{this.props.value}</div>;
????}
????});
????????????????? shouldComponentUpdate ????:
????shouldComponentUpdate: function(nextProps?? nextState) {
????return this.props.value !== nextProps.value;
????}
???????????????????????? props??state ??????????????????????????????????????????? Mixin ??????С?????? React ????????????????: PureRenderMixin
??????????????????? props ???? state ???????????????????????????? prop ????????? 'bar' ??????????????????????????????? JavaScript ???????? { foo: 'bar' }:
????React.createClass({
????propTypes: {
????value: React.PropTypes.object.isRequired
????}??
????render: function() {
????return <div>{this.props.value.foo}</div>;
????}
????});
???????? shouldComponentUpdate ???????????????????????????:
????// assume this.props.value is { foo: 'bar' }
????// assume nextProps.value is { foo: 'bar' }??
????// but this reference is different to this.props.value
????this.props.value !== nextProps.value; // true
?????????????? prop ??и?????? shouldComponentUpdate ????? true???????????????????????????????:
????shouldComponentUpdate: function(nextProps?? nextState) {
????return this.props.value.foo !== nextProps.value.foo;
????}
???????????????????????????????????????????????????????????????????????????????????? model д??????????????????????????????д????????????????????????????????????????:
????React.createClass({
????getInitialState: function() {
????return { value: { foo: 'bar' } };
????}??
????onClick: function() {
????var value = this.state.value;
????value.foo += 'bar'; // ANTI-PATTERN!
????this.setState({ value: value });
????}??
????render: function() {
????return (
????<div>
????<InnerComponent value={this.state.value} />
????<a onClick={this.onClick}>Click me</a>
????</div>
????);
????}
????});
????????????????????????????? { foo: 'bar' } ??? value ???????????????? a ???????????? state ????3? { value: { foo: 'barbar' } }????????????????????????????????????? { foo: 'barbar' } ??? value ???μ????
????????????????????????????????????????????????????????? onClick ?????????з???????????????????????????????????????????????????shouldComponentUpdate ??????????this.props.value.foo ?? nextProps.value.foo??????????????? this.props.value ?? nextProps.value ??????????????á?
?????????????? prop ????????????????????UI ?????? 'bar' ???μ? 'barbar'
????Immutable-js ??????
????Immutable-js ?? Lee Byron д?? JavaScript ?????????????? Facebook ??????????????????????????????????????????Щ????????:
????Immutable: ????????????????????
????Persistent: ?μ?????????????????????????????? set ?????????????????μ?????????????????Ч??
????Structural Sharing: ?μ???????t?????????????????????????????????????á?????μ?????????????????????????
????????????????????????θ????????μ????????????????????????????????????μ??? JavaScript ????
????var x = { foo: "bar" };
????var y = x;
????y.foo = "baz";
????x === y; // true
???????? y ???????????? x ???????????????????????? true???????????????????? immutable-js ??д????:
????var SomeRecord = Immutable.Record({ foo: null });
????var x = new SomeRecord({ foo: 'bar'  });
????var y = x.set('foo'?? 'baz');
????x === y; // false
????????????У??????? x ??????????μ???????????????????? x ??????
?????????????????????е?????????? setters ?????????????????????????????????? setters???????д?????????????????????????????????????????????????????????????????????????????????????????????????????????????
???????????????????????????????Ч????????????????????????????????? shouldComponentUpdate ????????????????????? immutable-js ????????? props ?? state ?????????????? PureRenderMixin???????????ú????????????