React 基础 组件
1.创建的类需要在别的类中使用，则建立的时候需要添加export default ，另外return里面只能有一个节点，下图就是一个简单的组件
组件的创建
2.使用时以标签的形式使用，并以导包的方式引入进来即可(组件的使用)
组件的使用
3.组件也可以通过参数的方式传递使用
以参数的方式传递
4.同样的，react中也可以使用三目表达式
三目表达式
5.组件中参数传递不在需要单引号，直接{}就可以
参数传递
5.组件中注释，当使用 “//注释”时html上也会显示这个注释内容，但页面上并不会显示，当使用“{/* 注释 */}”注释时，html和页面都不会显示这个注释。
6.组件的生命周期
React生命周期
componentWillMount()：页面将要加载之前会先走这个函数，可以在这个函数里面加载一些页面的数据，以及实现一些逻辑等等。
componentDidMount()：页面加载之后会走这个函数。
React属性与事件
1.constructor构造方法：
在一个类中只能有一个名为 “constructor” 的特殊方法。 一个类中出现多次构造函数 (constructor)方法将会抛出一个 SyntaxError 错误。在一个构造方法中可以使用super关键字来调用一个父类的构造方法。如果没有显式指定构造方法，则会添加默认的 constructor 方法。如果不指定一个构造函数(constructor)方法, 则使用一个默认的构造函数(constructor)。
constructor解释
React中使用constructor构造方法更改 state 的时候会立即引起值得变更，但不会刷新整个页面，效率非常的高，而且不会影响其他组件的state的值，只影响本身。state对于模块来说属于自身的属性。
4秒之后更改页面的值，会刷新页面，但是不会刷新整个页面的值，只会恒爱state中的值
2.React之props属性：组件之间进行传值，对于模块属于外来的属性
向BodyIndex中传值
BodyIndex中使用props接受值
3.事件与数据的双向绑定
事件的绑定
点击"提交"按钮之后年龄会由原来20，改为50
点击更改年龄
当然也可以在绑定的时候传一个值过去，这样点击"提交"按钮之后年龄会由原来的20变为99
点击传值
子页面向父页面传递参数的方法
在子页面中通过调用父页面传过来的事件 props 进行组件的参数传递，通过onChange获取子页面输入的值，父组件中绑定并接受子组件传过来的值，并更改父组件中的值。
时随着输入框的输入值实时触发 onChange 事件，从而实时更新 p 中的值
子类组件
父类组件
4.可复用组件
当父组件给子组件传的值不是一个数字时，则会报错，子组件中添加了一个约束，使子组件只接收所有父组件传过来的数字类型，其他都不接收。
父组件
子组件中规定userid的类型为数字类型
如果number后面加一个 ".isRequired "则父组件引用子组件必须要传这个参数，如果添加上
"BodyIndex.defaultProps = defaultProps; "这个约束，那么当父组件没有传username这个值时则会给他一个默认值，就是上图中的 defaultProps。
如果说父传子属性 子在传子属性 书写方法 "{...this.props} id={4}","...this.props"是拿到所有的参数，"id={4}"是又另外传了一个值过去。
5.组件的refs
当使用ref时，使用 this.refs.submitButton.style.color = 'red' 可以直接更改input中的颜色
ref
Refs 是访问到组件内部 DOM 节点唯一可靠的方法
Refs 会自动摧毁对子组件的引用
不要在 render 或 render 之前对 Refs 进行调用
不要滥用 Refs
React 样式
1.内联样式
其中的header只会影响本类，不会对其他的类进行污染
样式需要使用驼峰写法属性也是需要引起来，如果样式要使用html中的则也需要用引号引起来
注意标签中给他一个class属性需要改为className否则会与react中的class冲突
缺点是动画、伪类（hover）等不能使用
内联样式
2.内联样式中的表达式
当前 padding-top 和 paddingBottom 的高度为15px，当触发了点击事件之后会给minHeader的值取反，这样他们的值为3px，样式会实时更改，不用刷新页面
实时改变样式
3.CSS 模块化
css文件可以以require的方式导入进来，在下面直引用即可
这里可以使用 class 是因为使用了一个插件 "babel-plugin-react-html-attrs"
footer.css只会影响引入的类，不会影响其他的类
使用的插件
css模块化
React Router 路由
1.Router 基础
首先需要引入路由，并把程序的入口改为<Root/>
其中的 "/" 和 "list" 是平级的，都是一个单独的页面
而其中的 "details" 为嵌套路由，"details"不是一个单独的页面，他会显示在他所嵌套的路由的页面上，而在路由上只要简单的使用this.props.children即可引用子路由
路由
引用子路由
2.参数传递
参数传递时可以通过 "list/123" 写死，也可以通过 "list/:id" 的方式占位，页面url上拼上就可以
而在对应的页面上只需要使用 "this.props.params.id" 就可以接收到url上的值
参数传递
页面接收参数
