关键知识点
项目配置:
1 | Redux、Redux-thunk、axios |
1、
1 | <Fragment></Fragment>:占位符,不会出现在节点中 |
2、
this指向问题,用bind
3、
给数组加值,擅用解构:[…this.state.list,newValue]
4、
1 | dangrouslySetInnerHTML={{__html:item随便}}不转义,容易被XSS注入脚本攻击。 |
5、
父组件可以将数据、方法传给子组件,子组件可以使用父组件传过来的数据,使用父组件传过来的方法,从而改变父组件的数据。注意,子组件里没有父组件的方法,所以要通过bind(this),将this指向父组件,否则指向的是子组件,就会提示找不到这个方法。
6、
1 | 新版推荐以下方法修改值 |
7、
1 | import PropTypes from 'prop-types' |
8、
数据发生变化,驱动页面发生变化,那么如何提高性能?
可通过比较虚拟Dom的变化来比较,比直接通过Dom性能要高
1 | 虚拟Dom是一个JS对象,用来描述真实的Dom |
React 数据视图更新原理
原来不好的两种方案
方案一:
1 | 1、state 数据 |
方案二:
1 | 1、state 数据 |
方案三:
1 | 1、state 数据 |
9、JSX -> creatElement -> 虚拟Dom(JS对象)-> 真实的Dom
1 | return <div></div> |
10、React虚拟DOM中的Diff算法:虚拟 DOM Diff 算法解析
11、ref 可用来获取Dom节点
12、
13、安装charles:用于接受请求,返回本地的数据,模拟服务器
14、axios用于向后台请求数据,替代ajax
1 | componentDidMount() { |
15、redux devtools,redux用于多个组件之间的数据通信
1 | npm install --save redux |
16、安装 styled-components
17、reset.css
18、Redux的工作流程