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来阻止子组件随着父组件更新而更新