react实践-阿里云开发者社区

React 最佳实践一、 React 与 AJAX
React 只负责处理 View 这一层，它本身不涉及网络请求 /AJAX:

第一，用什么技术从服务端获取数据；
第二，获取到的数据应该放在 react 组件的什么位置。

事实上是有很多的：fetch()、fetch polyfill、axios...
其中最需要我们关注的是window.fetch(),它是一个简洁、标准化的 javascript 的 Ajax API 。
在 Chrome 和 Firefox 中已经可以使用，如果需要兼容其他浏览器，可以使用 fetch polyfill 。
ajax实践：

1.所有的数据请求和管理都存放在唯一的一个根组件让父组件 /根组件集中发送所有的 ajax 请求，
把从服务端获取的数据统一存放在这个组件的 state 中，再通过 props 把数据传给子组件。
这种方法主要是针对组件树不是很复杂的小型应用。缺点就是当组件树的层级变多了以后，
需要把数据一层一层地传给子组件，写起来麻烦，性能也不好。

2.设置多个容器组件专门处理数据请求和管理其实跟第一种方法类似，只不过设置多个容器组件来负责数据请求和状态管理。
这里我们需要区分两种不同类型的组件，
一种是展示性组件（ presentational component ），
另一种是容器性组件（ container component ）。
展示性组件本身不拥有任何状态，所有的数据都从容器组件中获得，在容器组件中发送 ajax 请求。

3.使用 Redux 或 Relay 的情况Redux 管理状态和数据， Ajax 从服务器端获取数据，所以很显然当我们使用了 Redux 时，
应该把所有的网络请求都交给 redux 来解决。具体来说，应该是放在Async Actions。
如果用其他类 Flux 库的话，解决方式都差不多，都是在 actions 中发送网络请求。

把计算和条件判断都交给render()方法吧

echarts
概览页面 -》 echats图修改的时候犯了个错 yield put({ type: ' DescribeInvadeTrend' }); --》
发现没有请求咋回事！！！！注意观察代码...

React setState
setState(updater, callback)这个方法是用来告诉react组件数据有更新，有可能需要重新渲染。它是异步的，react通常会集齐一批需要更新的组件，然后一次性更新来保证渲染的性能，所以这就给我们埋了一个坑：
那就是在使用setState改变状态之后，立刻通过this.state去拿最新的状态往往是拿不到的。
所以第一个使用要点就是：如果你需要基于最新的state做业务的话，可以在componentDidUpdate或者setState的回调函数里获取。(注：官方推荐第一种做法)
设想有一个需求，需要在在onClick里累加两次，如下:

onClick = () => {
    this.setState({ index: this.state.index + 1 });
    this.setState({ index: this.state.index + 1 });
  }

在react眼中，这个方法最终会变成

Object.assign(
  previousState,
  {index: state.index+ 1},
  {index: state.index+ 1},
  ...
)

由于后面的数据会覆盖前面的更改，所以最终只加了一次.所以如果是下一个state依赖前一个state的话，推荐给setState传function

onClick = () => {
    this.setState((prevState, props) => {
      return {quantity: prevState.quantity + 1};
    });
    this.setState((prevState, props) => {
      return {quantity: prevState.quantity + 1};
    });
}

以上是使用setState的两个注意事项，接下来我们来看看setState被调用之后，更新组件的过程：

ReactBaseClassses.js
ReactComponent.prototype.setState = function (partialState, callback) {
  //  将setState事务放进队列中
  this.updater.enqueueSetState(this, partialState);
  if (callback) {
    this.updater.enqueueCallback(this, callback, 'setState');
  }
};

这里的partialState可以传object,也可以传function,它会产生新的state以一种Object.assgine（）的方式跟旧的state进行合并。

二、enqueueSetState

enqueueSetState: function (publicInstance, partialState) {
     // 获取当前组件的instance
    var internalInstance = getInternalInstanceReadyForUpdate(publicInstance, 'setState');
     
     // 将要更新的state放入一个数组里
     var queue = internalInstance._pendingStateQueue || (internalInstance._pendingStateQueue = []);
    queue.push(partialState);
     
     //  将要更新的component instance也放在一个队列里
    enqueueUpdate(internalInstance);
  }
.

..消化...

state和props
React 的核心思想是组件化的思想，而React 组件的定义可以通过下面的公式描述：
UI = Component(props, state)
不是对props 和state 基本用法的介绍，而是尝试从更深层次解释props 和 state，并且归纳使用它们时的注意事项。
一句话概括，props 是组件对外的接口，state 是组件对内的接口。
组件的props 和 state都和组件最终渲染出的UI直接相关。
组件中用到的一个变量是不是应该作为组件state，可以通过下面的4条依据进行判断：

这个变量是否是通过props从父组件中获取？如果是，那么它不是一个状态。 
这个变量是否在组件的整个生命周期中都保持不变？如果是，那么它不是一个状态。 
这个变量是否可以通过state 或props 中的已有数据计算得到？如果是，那么它不是一个状态。 
这个变量是否在组件的render方法中使用？如果不是，那么它不是一个状态。这种情况下，这个变量更适合定义为组件的一个普通属性（除了props 和 state以外的组件属性），例如组件中用到的定时器，就应该直接定义为this.timer，而不是this.state.timer。 
不能依赖当前的props计算下个state，因为props的更新也是异步的。

Object.assign(
  previousState,
  {quantity: this.state.quantity + 1},
  {quantity: this.state.quantity + 1}
)

当点击一次购买按钮，购买的数量就会加1，如果我们连续点击了两次按钮，就会连续调用两次this.setState({quantity: this.state.quantity + 1})

// 正确
this.setState((preState, props) => ({
  counter: preState.quantity + 1; 
}))

State 的更新是一个浅合并（Shallow Merge）的过程。
例如，一个组件的state为：

this.state = {
  title : 'React',
  content : 'React is an wonderful JS library!'
}
this.setState({title: 'Reactjs'});
React会合并新的title到原来的组件state中，同时保留原有的状态content，合并后的state为：
{
  title : 'Reactjs',
  content : 'React is an wonderful JS library!'
}

State与Immutable
React官方建议把state当作不可变对象，一方面是如果直接修改this.state，组件并不会重新render；另一方面state中包含的所有状态都应该是不可变对象。
如有一个数组类型的状态books，当向books中增加一本书时，使用数组的concat方法或ES6的数组扩展语法（spread syntax）：

// 方法一：使用preState、concat创建新数组
this.setState(preState => ({
  books: preState.books.concat(['React Guide']);
}))

// 方法二：ES6 spread syntax
this.setState(preState => ({
  books: [...preState.books, 'React Guide'];
}))
当从books中截取部分元素作为新状态时，使用数组的slice方法：
// 使用preState、slice创建新数组
this.setState(preState => ({
  books: preState.books.slice(1,3);
}))

当从books中过滤部分元素后，作为新状态时，使用数组的filter方法：

this.setState(preState => ({
  books: preState.books.filter(item => {
    return item != 'React'; 
  });
}))

注意不要使用push、pop、shift、unshift、splice等方法修改数组类型的状态，因为这些方法都是在原数组的基础上修改，而concat、slice、filter会返回一个新的数组。

状态的类型是简单对象(Plain Object)

this.state = {
  owner = {
    name: '老干部',
    age: 30
  }  
}
this.setState(preState => ({
  owner: Object.assign({}, preState.owner, {name: 'Jason'});
}))
//第一种方法
this.setState(preState => ({
  owner: {...preState.owner, name: 'Jason'};
}))
//第二种方法

总结一下，创建新的状态的关键是，避免使用会直接修改原对象的方法，而是使用可以返回一个新对象的方法。当然，也可以使用一些Immutable的JS库，如Immutable.js，实现类似的效果。
那么，为什么React推荐组件的状态是不可变对象呢？一方面是因为不可变对象方便管理和调试，了解更多可参考这里： http://redux.js.org/docs/faq/ImmutableData.html#benefits-of-immutability
另一方面是出于性能考虑，当组件状态都是不可变对象时，我们在组件的shouldComponentUpdate方法中，仅需要比较状态的引用就可以判断状态是否真的改变，从而避免不必要的render方法的调用。当我们使用React 提供的PureComponent时，更是要保证组件状态是不可变对象，否则在组件的shouldComponentUpdate方法中，状态比较就可能出现错误。
porps的改变为什么是异步的？？？？？？？？？

React顶级API

React.Component
class Greeting extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}</h1>
    }
}
ReactDOM.render(
    <Greeting name={"zhangyatao"}/>,
    document.getElementById('root)
)

React.PureComponet
它实现了shouldComponentUpdate()对props和state的进行浅比较。
React.PureComponent的shouldComponentUpdate()仅会对对象进行浅比较,如果对象包含复杂的数据结构,对于深层次的差异有可能会产生false-negatives(假阴性,相当于医院中的错诊)。

React.Children
React.children提供了处理this.props.children中那些不透明的数据结构的一些工具函数。

React.Children.map
React.Children.map(children, function[(thisArg))
React.Children.forEach(children, function[(thisArg)])
和React.Children.map相同，只不过不会返回一个数组。

React.Children.count
React.Children.count(children)
返回children中的组件总数。

React.Children.toArray
React.Children.toArray(children)
将子元素中的不透明数据结构作为一个一维数组返回。如果你想在render方法中操作children集合，特别是如果你想在传递它之前重新排序或切割this.props.children，这个方法将非常有用。

React.PropTypes
React.PropTypes是一系列类型验证器的集合，可以与组件的propTypes对象一起使用，以验证传递到组件的props。

深入理解JSX
从根本上讲，JSX就是提供了一个React.createElement(component, props, ...children)函数的语法糖。就像下面的JSX代码：

<MyButton color="blue" shadow={2}>
    Click Me
</MyButton>

经过编译后为：

React.createElement(
    MyButton,
    {color: 'blue', shadow: 2},
    'Click Me'
)

<div className="sidebar" />

经过编译后为：

React.createElement(
    'div',
    {className: 'sidebar'},
    null
)

如果你想测试一些特定的JSX是如何转换成JavaScript的话，你可以试试在线Babel编译器。
由于JSX编译的本质是对React.createElement的调用，因此React库也必须始终在JSX代码的作用域中。
还可以使用JSX中的点表示符来引用React组件

const MyComponents = {
    DatePicker(props) {
        return <div>这里有一个颜色为{props.color}的日期选择器</div>
    }
};

function BlueDataPicker(props) {
    return <MyComponents.DatePicker color="blue" />
}

字符串直接量

<MyComponent message="hi " />

<MyComponent message={'hi'} />
<MyComponent message='&lt;3' />

<MyComponent message={'<3'} />

Props传递
如果你有一个对象类似的数据作为props，并且想在JSX中传递它，你可以使用...作为一个“spread”运算符传递整个props对象。这两个组件是等效的：

function App() {
    return <Greeting firstName="yatao" lastName="zhang" />;
}

function App() {
    const props = {firstName: 'yatao', lastName: 'zhang'};
    return <Greeting {...props} />;
}

JSX中的子元素和子组件

function MyComponent(props) {
    return <div>{props.children}<div>; //=> <div>hello</div>
}

JSX会删除行的开始和结尾处的空格。它也会删除中间的空行。与标签相邻的空行被会被删除;
在字符串文本中间出现的空行会缩合成一个空格。所以这些都渲染相同的事情：布尔值、null、undefined在渲染时会被自动忽略

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{true}</div>

如果你想要一个值如false，true，null或undefined出现在输出中，你必须先将它转换为字符串：

react性能查看工具
在最新的React16版本中，我们可以直接在url后加上?react_pref，就可以在chrome浏览器的performance，我们可以查看User Timeing来查看组件的加载时间。

ps：关于key的使用
关于key的使用我们要注意的是，这个key值要稳定不变的，就如同身份证号之于我们是稳定不变的一样。
一个常见的错误就是，拿数组的的下标值去当做key，这个是很危险的，代码如下，我们一定要避免。
将key设置为一个特殊字段，保证其唯一性

其他的检测工具

react-perf-tool 为React应用提供了一种可视化的性能检测方案，该工程同样是基于React.addons，但是使用图表来显示结果，更加方便。