React 16.4 开发简书项目 从零基础入门到实战（慕课网个人学习笔记）持续更新中……
2-3 工程目录文件简介
-
PWA progressive web application：通过写网页的形式写手机APP
registerServiceWorker：将网页上线到支持https协议的服务器上，访问一次即可离线访问 -
index.js：整个React项目的入口文件 index.html：负责页面显示的html内容
2-4 React中的组件
-
import { Component } from ‘react’ 等价于 import React from ‘react’ const
Component = React.Component -
ReactDOM将组件中的内容挂在到页面某个节点下
-
如果项目中使用到了JSX语法，一定要引用React
-
React组件一定要引用Component基类，React组件的render函数返回的内容也是JSX，同样要引用React
2-5 React 中最基础的JSX语法
- 组件具体渲染的内容由render函数返回的内容决定
- 在js当中使用html标签称之为JSX语法，不仅可以使用html中的标签，还可以使用自定义标签
- 在JSX语法中，如果我们要使用自己创建的组件，直接通过标签形式来使用已定义的组件名即可
- 组件必须以大写字母开头，大写为组件，小写为html5标签
3-1 使用React编写TodoList功能
- React组件中render函数返回的内容只能是一个元素（即在最外层包裹一个标签）。如果想在最外层包一个不被显示的元素（即隐藏最外层的标签），需要引入Fragment，然后用Fragment占位符替换最外层包裹的标签
3-2 React 中的响应式设计思想和事件绑定
-
React作为响应式框架，并不直接对DOM进行操作，而是通过操作数据来改变DOM（React会感知数据的变化，自动生成DOM）
-
在js中，类一定会有一个constructor构造函数，当我们创建实例的时候，会优先于任何一个函数执行 3.
constructor函数会接收一个props的参数，super(props)用于调用父类的constructor函数
constructor(props) { super(props); … }
属于固定写法在js中，类一定会有一个constructor构造函数，当我们创建实例的时候，会优先于任何一个函数执行 -
constructor函数会接收一个props的参数，super(props)用于调用父类的constructor函数
constructor(props) { super(props); … }
属于固定写法constructor函数会接收一个props的参数，super(props)用于调用父类的constructor函数
constructor(props) { super(props); … } 属于固定写法 -
React中定义数据需把数据定义在状态中：this.state = {…}
-
在JSX中使用js的变量一定要使用{…}
-
React中事件绑定采用驼峰规则
-
页面中显示的内容由数据决定，要改变页面显示内容，只需要使数据发生变化
-
事件绑定时注意函数的作用域，通过bind(this)可以对作用域进行绑定
-
对this.state当中的数据进行修改不能使用引用的方式直接修改，需要调用this.setState方法对数据进行修改
3-3 实现 TodoList 新增删除功能
-
immutable：state不允许我们做任何改变
-
对state中内容进行修改需要使用备份的方式复制一份数据，再对复制的数据进行修改
-
直接修改state中内容的操作影响到React的性能优化
3-4 JSX语法细节补充
-
在JSX中写注释需要在两头使用{…}，单行注释需要注意换行
-
在JSX中解析HTML语法可在标签上加上属性dangerouslySetInnerHTML={{__html:…}}
-
可以扩大点击区域，label中for要替换成htmlFor，在对应组件上加上id属性即可扩大其点击区域
3-5 拆分组件与组件之间的传值
-
组件拆分思想：让程序分为多个组件
-
父组件向子组件传值通过属性的方式传递，子组件通过this.props…来接受对应的属性中的内容
-
子组件修改父组件的数据：父组件通过属性的方式将父组件的方法传给子组件，子组件通过this.props…来调用父组件传递进来的方法来修改父组件中的数据
3-6 TodoList 代码优化
- 本章节笔记详见代码注释
3-7 围绕 React 衍生出的思考
- 声明式开发：React为声明式开发 命令式开发：jQuery为命令式开发 React可以与其他框架并存，在index.js当中将React挂载到id='root’的DOM结点下，在index.html中存在id='root’的标签，React项目只管理id='root’标签中DOM的渲染，其他DOM可以引入其他框架。 React为组件化的开发，组件在应用中应为一个树状结构 React存在单向数据流的概念，父组件可向子组件传值，子组件只可使用不可修改，若需要修改父组件的数据，只能通过调用父组件传入的方法进行修改 React只是视图层的框架，需要配合数据流框架
- React采用函数式编程模式，为前段的自动化测试提供了极大便利
4-2 PropTypes 与 DefaultProps 的应用
-
使用PropTypes对父组件传递的属性进行校验，首先引入PropTypes from
‘prop-types’，属性校验对开发有更加友好，如果要求一定需要传值，在后面加上.isRequired -
使用DefaultProps为属性设置默认值，即使父组件没有向子组件传值，也不会出现错误
-
深入学习相关内容可以进入官网，找到Docs，右侧点击Advanced Guides，点击Typechecking With
PropTypes，查看官方的demo和文档
4-3 props，state 与 render 函数的关系
-
页面是有render函数渲染出来的，当组件的state或者props发生改变的时候，render函数就会重新执行，这个变化是实时的、同步变化的
-
当父组件的render函数被运行时，子组件的render都将被重新运行一次
4-4 React 中的虚拟DOM
4-5 深入了解虚拟DOM
- 可以使用React.createElement方法创建一个虚拟DOM（JS对象）
- React数据视图更新原理及其优点
- 虚拟DOM使得React既能开发网页应用，也能开发原生应用，在网页应用中将虚拟DOM转化为真实DOM，在原生应用中将虚拟DOM转化为组件
4-7 React 中 ref 的使用 - ref函数可以直接获取DOM元素：<input ref={(input) => { this.input = input }}
/>调用时使用this.input调用ref函数 - setState是异步函数，并不会立即执行，可能会合并执行，setState((prevState) => ({}), () => {})，第二个参数用于当setState方法执行完成后的回调
4-8 React 的生命周期函数
-
生命周期函数指在某一时刻组件会自动调用执行的函数，render就是一个生命周期函数
-
生命周期函数componentWillMount在组件即将挂载到页面的时候自动执行，即render函数执行执行之前
-
生命周期函数componentDidMount在组件挂载完成后自动执行，即render函数执行之后
-
componentWillMount和componentDIdMount只在组件被挂载到页面时执行，即在组件第一次被放在页面上时才执行
-
props和states发生变化时，组件会更新
-
props发生变化和states发生变化时组件更新有些许不同
-
生命周期函数shouldComponentUpdate在组件被更新之前，自动被执行，需要返回一个布尔类型的值
-
componentWillUpdate在组件更新之前，自动被执行
-
componentDidUpdate在组件更新之后，自动被执行
-
生命周期函数componentWillReceiveProps执行条件：从父组件接收参数，且父组件的render被重新执行了，子组件componentWillReceiveProps就会被执行
-
生命周期函数componenWillUnmount执行条件：当组件即将从页面中剔除
4-9 React 生命周期函数的使用场景
-
生命周期函数render必须存在
-
当父组件的render被重新渲染时，子组件render也会被重新渲染，此处会产生性能上的损耗
-
如果希望父组件render被重新渲染时，子组件render不重新渲染，可以使用生命周期函数shouldComponentUpdate，通过返回false来阻止子组件随着父组件更新而更新