React??????????

????Immutable-js ?? Flux
?????????????? Flux???????????? immutable-js д??? stores??????? full API??
?????????????????е???????ò????????????????????????????????????????????????????嶨????? Record??Records ???????????????????????汣?????о???????:
????var User = Immutable.Record({
????id: undefined??
????name: undefined??
????email: undefined
????});
????var Message = Immutable.Record({
????timestamp: new Date()??
????sender: undefined??
????text: ''
????});
????Record ???????????????????????κ?????????????
????????? store ??????????? list ?????? users ?? messages:
????this.users = Immutable.List();
????this.messages = Immutable.List();
????????????????? payload ??????????????????磬?? store ?????????????????? payload ??????????????μ? record????????????б?:
????this.messages = this.messages.push(new Message({
????timestamp: payload.timestamp??
????sender: payload.sender??
????text: payload.text
????});
????????????????????????????? push ???????????? this.messages??
?????? React ????????????? immutable-js ???????????????? state?????????? PureRenderMixin ???????????е???????????????????·???????????????????? 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;
????}