React - review 1

一、 React 简介

1. React Js => 可以用 React 的语法来编写一些网页的交互效果
2. React Native => 可以让我们借用 React 语法编写原生的 app 应用

4. React Fiber => 指 React Js 的16版本，或16版本中的一些底层实现
           在16版本中 ，React 底层在数据循环中加入了优先级等一些概念 ，可以利用事件循环的一些碎片时间执行一些高优先级的用户交互 ，提高React Js 使用中的用户体验
5. React 相对于 Vue :
           React 更加灵活，处理复杂的项目有更多的技术方案的选择；Vue 具有丰富的API，实现功能更加简单，由于API丰富导致灵活性受限制。所以 React 更适合做相对复杂的项目，Vue 更加适合轻量级的项目

二、 React 开发环境准备

1. 使用 React Js 的两种方式
   1）通过 script 标签引入
   2）通过脚手架工具来编码（create-react-app <= React 官网提供）
2. 创建项目：create-react-app my-app
3. 启动项目：npm start

三、 React 工程目录文件简介

1. README.md => 项目说明文件（可以通过 maekdown 语法自己写一些关于项目的介绍）
2. package.json => node 的包文件，可以让项目变成一个 node 的包
3. .gitignore => 当用 Git 管理代码时，有些文件不想传到仓库上，可以把这些文件定义在 .gitignore 中
4. node_modules => 项目依赖的一些包
5. src/index.js => 整个文件的入口文件
6. public/index.html => html 模板

四、React 中的组件

1. 通过 ReactDOM.render 将 React 生成的一些组件或内容挂载到某个节点上，让它显示出来
2. 引入组件首字母大写，如：<App />
   普通的标签首字母小写，如：<input /> 、<span>
3. 父子组件通信：
           父组件通过属性向子组件传值 ；子组件如果想操作父组件的数据，需要父组件向子组件传递一个方法，子组件去调用这个方法，间接的来操作父组件的数据

五、Jsx 语法需要注意

1. dangerouslysetInnerHTML：可以让某些标签中的内容不被转义
2. lable 标签的 for 属性 => htmlfor
3. 类名class => className

六、围绕 React 衍生出来的思考

1. 声明式开发 => 节省了大量的DOM操作
2. 可以与其它框架并存
3. 组件化
4. 单向数据流
           父组件可以向子组件传值，子组件只能使用这个值，而不能去改变这个值 （很多子组件都使用了父组件传来的值，如果出现了问题，不知道是哪个子组件修改了父组件的值 ，需要一一查找）
           那么子组件如何修改父组件数据呢？-- 子组件调用父组件中的方法来修改
5. 视图层框架

        如果要实现I组件与G组件之间的通信，需要G -> D -> B -> A -> C ->I 过于冗余，所以说 React 作为视图层，复杂的组件通信需要配合 redux 等框架
6. 函数式编程 => 易于维护，给前端自动化测试带来了方便

七、propTypes 与 DefaultProps 的应用

1. propTypes ：可以限制、要求父组件给子组件传过来的值的类型（不符合会报出警告，不影响执行）

	App.propTypes = {
	    test: TodoList.prototype.string.isRequire;  // 父组件必须向子组件传test
	    content: TodoList.prototype.string  // 可以不传
	}

2. defaultProps：当父组件未给子组件传递 test ，而子组件要求必须传值的时候，可以使用defaultProps来设置默认值

	App.defaultProps= {
	    test: 'Hi React'
	}

八、props、state 与 render 函数

1. 当组件的 props 或 state 发生改变的时候，render 函数就会重新执行
2. 当父组件的 render 函数执行时，它的子组件的 render 也会重新执行
3. render 重新执行：