认识React
JSX—一种语法结构
一、环境安装：
1.HTTP服务器
安装python3.5.2
建立项目文件夹react_py
打开teminal（windows上我安装的cmder）
进入该目录下
启动服务器命令
python -m http.server
2.相关准备
安置需要的框架文件
react官方链接：https://reactjs.org/
react官方教程：https://reactjs.org/tutorial/tutorial.html
在右上方git中下载最新版本的master（速度挺慢的），看例子
cdn链接：
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>复制上面的链接，浏览器打开，分别复制内容到新建的js文件中
附加（sublime3）下载：https://www.sublimetext.com/3
index.html为新建文件
开启浏览器：http://localhost:8000/component/index.html
说明可以跑起来了
二、组件化
1.组件化思想
引入框架到文件中
ctrl+F5刷新（F12-开发者模式，查看console控制台发现红色文字报错，警告：说明不太正规）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello react</title>
<script src='react.js'></script>
<script src='react-dom.js'></script>
<script src='browser.min.js'></script>
</head>
<body>
<script type='text/babel'>
ReactDOM.render(
<h1>I am Tyler</h1>,
document.body
)
</script>
</body>
</html>挂载节点父元素-body元素，一般不要挂载在body上
2.react组件化
利用函数思想渲染页面，复杂组件由简单组件组成
做一个hello world组件：
jsx对象
增加jsx文件，通过react解析，然后dom挂载
渲染
通过react提供的creatClass组件创建，上面函数中render作用是在渲染的时候会调用下面render函数，得到jsx对象，改变dom模型，进而改变界面
Helloworld就是一个组件
使用的时候就在ReactDOM.render里面加载
显示出来
组件的优越处：可重用性
增加组件的父节点和其他兄弟节点
组件输入参数：
this指代整个HelloWorld组件对象，props是组件的数据对象，greetTarget是参数名
输入不同参数
3.组件样式设计
pros.children
添加组件，涉及根节点
在react下class是关键字，应该使用className
react下设计逻辑和页面逻辑的整合：
把界面设计逻辑封装成一个json对象，把这个对象放在react空间的代码块里面
把界面显示属性封装在letterStyle里，删除style
把对象放到render函数里，css语法整合在js里
设置不同颜色，组件显示的可配置化
设计复合式控件（类似调色板）：
基本框架代码
Square为上方颜色空间，Label为下方文字空间
Card为两个空间的结合，把其绘制到根节点下
Card空间装饰
4.组件实现
color变量属性
字空间的color先通过父属性传递
修改可变，空间可重用
5.组件属性的传递
react不能直接从1到5，属性也不能反向传递（子到父）
使用基本框架代码
外层组件
在外层属性
最外层设置属性值
属性传递不灵活
使用ES6 中{...}语法，属性的扩展操作符
6.组件状态机制
灵活？ 组件是程序的基本单位。需要存储机制-组件的状态机制
在基本框架里新建对象
增加显示样式
增加背景颜色
基本逻辑完成
了解几个js原生接口：
getInitialState——组件加载之前会被调用-初始化组件
componentDidMount——组件被浏览器加载之后，但是render函数还没有被调用之前
这里是调用定时器的最佳时期
setState——用来修改组件本身的state对象
timerTrick是个回调函数
计数开始变化
调用机制：
getInitialState初始化加载 —> componentDidMount被调用 —> 定时器开启 —> 触发上图render函数 —> 如果render里面引用了他的子组件，子组件的render也会被自动调用，会引发render函数的调用浪潮，整个界面的信息会自动发生改变 —> 使得底层数据和界面保持一致
增加界面修饰内容：
数据显示
增加属性对象
三、组件的生命周期
几个重要的生命周期函数
对应this.props
对应this.state
挂在到#container下
说明组件被框架加载到页面了
页面绘制
生命周期顺序1-组件生成
getDefaultProps —> getInitialState —> componentWillMount —> render —> componentDidmount
增加页面样式
创建子组件Counter，增加display显示属性
传递值0
变量初始化为0
增加increase函数
添加函数
shouldComponentUpdate生命周期函数
参数newPros对应的是getDefaultProps函数的rentrun对象
newStae对应的是更新好的count对象
如果返回值是true的话会继续调用，如果不是就会停止调用后续的生命周期函数
shouldComponentUpdate是个很重要的周期函数，它的逻辑关系到整个生命周期
componentWillUpdate,componentDidUpdate生命周期函数
生命周期顺序2-组件调用
getDefaultProps —> getInitialState —> componentWillMount —> componentDidmount—> render —> shouldComponentUpdate (true) —> componentWillUpdate (false) —> render —> componentDidUpdate
一个正常的生命周期流程
getDefaultProps —> getInitialState —> componentWillMount —> componentDidmount—> render —> shouldComponentUpdate (false)
5时停止调用后续
getDefaultProps —> getInitialState —> componentWillMount —> componentDidmount—> render —> shouldComponentUpdate (true) —> componentWillUpdate (true) —> shouldComponentUpdate (true) —> componentWillUpdate ...
1-4时反复调用
探索更新周期
componentWillUnmount生命周期：用于结束某些组件
在shouldComponentUpdate中添加拿掉节点的react语句
生命周期顺序3-组件消亡：
getDefaultProps —> getInitialState —> componentWillMount —> componentDidmount —> render —> shouldComponentUpdate (true) —> componentWillUpdate (false) —> render —> componentDidUpdate —> shouldComponentUpdate (false) —> componentWillUnmount(定时器组件被拿掉前，做收尾处理)
comentWillReceiveProps生命周期
shouldComponentUpdate生命周期
componentWillUpdate生命周期
接下来调用render
componentDidUpdate生命周期
在组件上设置断点
点击+
继续断点，之后调用render，把相应的值绘制
生命周期顺序总结：
getDefaultProps-getInitialState-componentWillMount-componentDidMount-shouldcomponentUpadate-componentWillReceiveProps-shouldcomponentUpadate-componentWillUpdate-render-componentDidUpate
相关学习网站：
1.推荐 10 个 ReactJS 入门资源： https://www.oschina.net/translate/10-resources-to-get-you-started-with-reactjs