使用create-react-app脚手架搭建项目
npx create-react-app my-app
cd my-app
npm start
JSX语法中，如果我们要使用自己创建的组件组件名必须以大写字母开头如App
组件的render元素必须写在一个div标签内部有时会影响布局效果。自定义组件可通过引入Fragment占位符替换最外层div标签则组件最外层不会有任何标签包裹。
响应式设计思想和事件绑定
JSX语法中js语句要写在{}中
不可以直接修改state而是通过setState({})函数
react只负责id=root里的DOM元素的渲染
react单项数据流（与vue双向绑定不同）
父组件可以向子组件传递数据，但是子组件只能使用这个值不能改变这个值。在子组件中可通过调用父组件的方法修改数据，数据只能在父组件中修改此方法方便问题定位bug调试。
react非父子组件通信比较麻烦需要依靠父子关系一层一层传值，所以大型项目需要借助其他框架帮助react进行非父子组建间的通信。
引入PropTypes 类型强校验
import PropTypes from 'prop-types'
当组建的state或props发生改变时render函数就会重新执行
当父组件的render运行时子组件的render都将运行一遍
虚拟DOM
1.state 数据
2.JSX 模板
3.数据模板结合生成真实DOM
4.数据发生改变
5.新数据模板结合生成真实DOM替换原有DOM
缺陷：
第一次生成完整DOM片段第二次又生成完整DOM片段非常耗性能
改进：
1.state 数据
2.JSX 模板
3.数据模板结合生成真实DOM
4.数据发生改变
5.新数据模板结合生成真实DOM
6.新的DOM（DocumentFragment）和原始的DOM做比对找差异
7。只替换发生改变的DOM
缺陷：
性能的提升并不明显
虚拟DOM方案
1.state 数据
2.JSX 模板
3.数据模板结合生成虚拟DOM（就是一个js对象，用它来描述真是DOM）
['div', {id: 'abc'}, ['span', {}, ['qqq']]]
4.用xuniDOM结构生成真实DOM
<div id="abc"><span>qqq</span></div>
5.数据发生改变qqq => bbb
6.数据模板结合生成新的虚拟DOM（极大的提升了性能）
['div', {id: 'abc'}, ['span', {}, ['bbb']]]
7.比较原始虚拟DOM和新的虚拟DOM的区别（极大的提升了性能）
8.直接操作DOM改变修改的内容
有点：
1.提升性能
2.跨终端得以实现，React Native
ref
使用ref获取DOM与setState合用时希望页面更新后获取DOM操作写在setState第二个参数回调函数里
生命周期函数
生命周期函数指在某一时刻组件会自动调用执行的函数
image.png
1.初始化init
2.挂载
componentWillMount：在组件即将被挂载到页面时自动执行（只有组件挂载时执行一次）
render执行
componentDillMount：组件被挂在到页面之后自动被执行（只有组件挂载时执行一次）
3.更新
componentWillReceiveProps：当一个组件从父组件接收了参数，只要父组件的render函数被重新执行了，子组件的这个生命周期函数就会被执行。即如果一个组件第一次存在于父组件中不会执行，如果这个组件之前已经存在于父组件中则会执行。
shouldComponentUpdate：组件被更新前自动执行（返回一个布尔值，true跟新组件向下执行，false不更新组件不向下执行）
componentWillUpdate：组件被更新之前自动执行，在shouldComponentUpdate之后被执行。shouldComponentUpdate返回true才执行。
render执行
componentDidUpdate：组件更新完成之后它会被执行
4.unmounting
componentWillUnmount：当组将即将从页面中剔除时自动执行
// 性能优化防止父组件render执行时子组件数据未发生变化也执行render函数，防止生成不必要的虚拟DOM做比对
shouldComponentUpdate(nextProps, nextState) {
console.log(nextProps.content, this.props.content)
if (nextProps.content !== this.props.content) {
return true
} else {
return false
}
}
componentDidMount() {
// ajax请求一般放在这里
}
react-transition-group
成组动画应注意key值的选取，否则动画效果可能与预期不符
key不能用index删除时动效会出问题，key应改不重复且稳定
key值可通过引入npm中的uuid插件通过uuid()生成
Redux(组件间数据管理)
image.png
1.store是唯一的
2.只有store能改变自己的内容
3.Reducer必须是纯函数(给定固定的输入就一定会有固定的输出，而且不会有任何副作用比如对接收的参数做修改)
Redux核心API
createStore 创建一个store
store.dispatch 派发action
store.getState 获取store数据
store.subscribe 订阅store的改变
antd
安装
$ npm install antd --save
$ yarn add antd
安装redux devtools谷歌插件
UI组件负责页面的渲染
容器组件负责页面的逻辑
无状态组件：当一个组件只有一个render函数（其实无状态组建就是一个函数）当一个组件只有一个render函数时我们就可以替换成一个无状态组建，无状态组件性能高。因为普通组件是一个类，类里面有生命周期函数，比一个函数执行的多。
Redux-thunk中间件实现ajax请求
当ajax请求逻辑较多时放到componentDidMount请求时显得比较臃肿。这个中间件是redux的中间件，创建store时使用。
使用Redux-thunk后actionCreator可以return一个函数
什么是Redux中间件
指的是action和store之间
image.png
网友评论