React的组件化思想尤为明显，一切皆组件，觉着比Vue的组件化思想更加凸显。
const PacketBG = (props) =>( <div className="packet-bg"> <div className="packet-wrap"> <p>{props.name}</p> <div className="packet-txt">{props.wishTxt}</div> <div className="open-packet" onClick={props.onClick}></div> </div> </div> ) PacketBG.defaultProps = { name:'Jack', wishTxt:'阖家欢乐，万事如意' }
React组件也可以实现数据和模板分离，可以写defaultProps,也可以通过使用组件时候给props的属性赋值。
组件之间的互相通讯是通过props来传递的，这个很重要！
State和Props组合使用：可以在父组件中设置state，然后通过子组件的props将其传递到子组件上。
React的数据单向流，自顶向下，从父组件到子组件的流向。
组件的事件处理：
事件绑定采用驼峰写法 ： <div onClick={props.onClick}>知道了</div>
而且不能使用返回return false来阻止默认行为，必须使用preventDefault。
1，组件列表的实现：
const ListItem = (props)=>( <li>{props.value}</li> ) const ComponetOne = (props)=>{ const numbers = props.numbers; return ( <ul> {numbers.map((n,index)=>( <ListItem key={index} value={n}/> ))} </ul> ) }
组件列表必须有key，在使用时候：<ComponetOne numbers={this.state.numbers}/>
2，React组件的API：
setState(nextState,callback)
//setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法。 this.setState({numbers:[7,8,9]},()=>alert(1))
nextState会合并到当前的state当中，并且重新渲染组件,并且还有回调函数。
replaceState(nextState,callback) //替换当前的state
setProps(nextProps,callback) //props是组件的数据流，总是从父组件流向子组件，setProps触发子组件重新渲染。
replaceProps(nextPrps,callback) //替换当前props
forceUpdate(callback) //强制更新
注意：
this.setState((prevState, props) => ({ counter: prevState.counter + props.increment }));
setState的状态更新可能是异步的，所以需要接受一个函数，而不是对象。状态的更新合并是浅合并，类似：Object.assign()；
3，props是只读的，意思是说子组件从父组件中传过来的props变量，在子组件内部不能修改，子组件对于从父组件上流传递下来的数据没有控制权。但是可以通过类似input的onChange事件属性，告知父组件，让父组件帮忙修改！
比如：我们要改变一个子组件的状态，若子组件本身具有state状态，那么内部改变其状态可以使用this.setState来更新状态，而若是从上流父组件下面传递来的props值，那么更新其状态，则需要this.props.onHandleChange()事件，告知上流父组件，让其帮忙更新【通常是父组件内部的state】。
React的状态提升：几个组件共用状态数据的时候，可以将共享的数据提升至他们最近的父组件当中统一管理，就达到了状态共享。
4，react组件的组合使用：
function FancyBorder(props) { return ( <div className={'FancyBorder FancyBorder-' + props.color}> {props.children} </div> ); }
该组件在使用时，props.children类似一个卡槽，JSX标签内的所有内容通过children传入FancyBorder中。如果需要多个入口的话，比如{props.content1},{props.content2},content1和content2可以是两个不同的组件，这样子就构成了组合组件。
React不推荐使用继承，而推荐使用组合组件！
5，React项目的理念思路：
理想情况下，根据“单一功能原则”，一个组件应该只做一件事情。一般构建UI思路自顶向下，也就是先整体后部分，在大型项目中，也可以先部分再整体。
6，JSX组件也可以使用点表示法：
function BlueDatePicker() { return <MyComponents.DatePicker color="blue" />; }
MyComponents里面有多个属性，属性值都是JSX组件，父组件使用中可以使用点表示法。
7，组件命名必须大写字母开头，如果是小写开头的标签会被认为是HTML原生标签，JSX的标签名可以是大写开头的变量，这样子的话，组件就是动态的了！
8，React组件的属性，如果没有给属性值，默认是true，下面两个JSX的使用是等价的：
<MyTextBox autocomplete />
<MyTextBox autocomplete={true} />
9，组件的展开属性：
如果props的属性比较多，可以使用对象的展开符...来传递
function App2() { const props = {firstName: 'Ben', lastName: 'Hector'}; return <Greeting {...props} />; }
10，Javascript中针对类型检查的库有Flow,TypeScript等，react自v15.5开始，使用prop-types库来进行类型检查。
Flow是Facebook开发的，经常和React一起使用，是专门针对javascript代码的静态类型检查器，可以使用npm进行添加。create-react-app脚手架默认是剥离Flow的。
TypeScript是由微软开发的，可以使用npm进行添加依赖。
11 ，react的ref的用法，目前字符串已废弃，全新的是React.createRef()，是React16.3提供的。
最早的时候在dom上面this.refs[‘inputRef’]来访问Dom，而最新的reactApi推荐通过ref的current属性来拿到dom节点。赋值：this.myRef = React.createRef()；然后将ref={this.myRef}挂载dom标签上，访问时通过this.myRef.current来确定dom元素。
React.createRef()方法接收底层DOM元素作为current属性以创建ref。
不能在函数式组件上使用ref，因为它们没有实例！！！想要使用ref，生命周期方法，或者state，必须使用class组件！
回调Refs：在实例属性中存储对DOM节点的引用！
注意：String版本的ref已被移除，如果以前还在使用，建议用回调函数方式代替。
12，react组件是react的核心所在，那么react元素是由JSX创建，这个是必须知道的，而渲染则是通过生命周期函数render()，跟浏览器的交互方法，则会放置在componentDidMount()的生命周期方法中或其他生命周期中。
13，一般网络请求都会放在componentDidMount(）中，然后在componentWillUnmount()方法中解除定时器，取消网络请求，清理订阅等。componentDidUpdate()是组件更新时候调用，也就是state更新时候会触发，如果state没有改变，那么将不会调用该函数。
在react中发送Ajax请求，可以搭配Axios，jQuery AJAX,浏览器内置的window.fetch都可以。
【未完待续】
新年flag6——