共计 3336 个字符，预计需要花费 9 分钟才能阅读完成。
1、react 设置的初衷就是为了帮忙用户高效的更新浏览器 DOM, 能够不须要再间接操作 DOM，取而代之的是去操作 React 元素（虚构 DOM, 本质是 JS 对象，示意如何创立浏览器 DOM 的一组指令）
(1)创立一个 React 元素
应用工厂类：第一个参数代表元素属性，第二个参数代表子节点
应用 createElement 办法
第一个参数代码咱们心愿创立的元素的类型，第二个参数代表元素含有的一些个性（属性），第三个参数即当前的参数代表元素的子节点，也能够是 React 元素，这些子节点最终都会被放进 props.children 中。
执行 React.creatElement()办法理论产生上面对象：
(2)渲染一个 React 元素成为 DOM 元素
第一个参数是咱们心愿渲染的 React 元素，第二个参数是指标节点，即渲染的具体位置。
2、应用 React 的益处：能够将 UI 和数据拆散，React 只蕴含 JS, 能够增加 JS 的业务逻辑来构建 React 组件树。例如在 React 中应用 map 函数（绑定 key 是为了辅助 React 更高效地更新 DOM）
3、React 创立组件的 3 种办法（导入组件的时候结尾要大写！）
能够在组件中增加传值类型查看，默认值等性能。
(1)createClass 函数（react3.0 当前已摈弃这种用法）
(2)ES6 类语法 (反对继承的自定义组件类)
(3) 无状态函数组件（创立一个返回 react 元素的纯函数）
4、JSX: JSX 其实是 React.createElement 的简化版。
JSX 还能够和组件一起应用：<IngredientsList list={[…..]}>，将数据传给组件时，须要用花括号将它括起来，花括号外部则是一个 JS 表达式。
JSX 不能间接在浏览器运行，能够用 babel 转译成 JS 语法，援用 CDN，对 type 为 text/babel 类型的 script 转译。
还能够和组件一起应用：
5、组件自定义事件与 ref:
this.submit = this.submit.bind(this)能够让 submit 办法的作用域变成这个组件的作用域
在 JSX 语法中用 ref 定义标识符后，React 就能通过标识符拜访 DOM。
6、翻转数据流（子组件的数据传到父组件中，即数据的双向绑定）
在父组件中定义一个函数属性：
(1)在自定义组件类中应用：
在子组件某触发函数中执行这个之前定义的函数：
(2)在无状态组件函数中应用：
先解构对象取得之前定义的办法
而后在某个触发函数中间接执行这个函数
7、在函数组件中 DOM 绑定事件并传值给定义的函数：
8、应用 useState(), 使得数据变动时，组件也从新渲染
9、
10、React 的 state 治理：React 组件中的 state 能够用单个 JS 对象示意，当某个组件的 state 发生变化，这个组件会渲染一个新的 UI 来反映这个变动。
(1)在 Class 中应用 state
先在构造函数中初始化 state
定义一个操作 state 的办法。只有通过调用 setState 办法扭转 state 才会去更新 UI
在组件中援用这个办法
(2) 无状态组件函数中不能应用 state
11、React 生命周期
(1) 挂载生命周期
①在 createClass 办法中:
1)getDefaultProps: 取得组件的属性
2)getInitialState: 来初始化 state
3)componentWillMount()
4)render()
5)componentDidMount()
6)componentWillUnmount()
②在 ES6 类语法中不存在上述两个办法，而是获取 props 后传给构造函数, 并在构造函数中初始化 state
1)constructor(props): 来取得组件属性和初始化 state
2)componentWillMount(): 在 DOM 被渲染前触发，用来初始化三方库，申请数据，启动动画等，还能触发 setState（等到渲染结束后触发，并更新生命周期）
3)render()
4)componentDidMount()：在组件渲染结束后触发，也是个创立 API 申请、初始化三方库的好中央。它外面的 setState 会间接启动更新生命周期。此时还能够启动 intervals，timers 等后盾过程。
5)componentWillUnmount()：在组件被卸载前触发
(2) 更新生命周期：当组件 state 发生变化或从父组件承受到新属性时触发
①componentWillReceiveProps(nextProps): 仅当新属性被传递给这个组件时，才会调用，在更新生命周期钩子中，只有这个能够调用 setState(避免有限递归)
②shouldComponentUpdate(nextProps,nextState): 更新生命周期的门卫，能够勾销更新操作。
③componentWillUpdate(nextProps,nextState): 组件更新前触发
④componentDidUodate(prevProps,prevState): 组件更新后触发
12、高阶组件（HOC）：是一个简略函数，承受一个组件，而后返回一个组件（包装组件）
13、Flux, 是 Facebook 开发的一种设计模式，旨在保持数据单向流动。
应用程序的 state 数据寄存在 React 组件内部的 store 进行治理。用户进行操作时，一个 action 会被创立（蕴含一组指令和须要变更的指标数据）。而后 Dispatcher（地方管制组件）会负责散发这个 action 到相应的 store 中。而 store 承受到一个 action 后，会批改 state 和更新 view。Flux 繁殖出很多框架，包含 Flux/ReduX 等等
14、Redux: 基于 Flux, 应用单个不可变对象示意应用程序的 State 蕴含 Action,Action 生成器，Store, 移出了 Dispatcher。引入了 Reducer: 是一个纯函数，会依据以后 State 和 Action 返回一个新的 State。
(1)State: 应用程序的 state 都放在一个对象中，且该对象不可变，只能通过整体替换的形式来更新这个 State 对象。
(2)Action: Action 是更新 State 的惟一办法
这个 action 就蕴含了类型和一些载荷数据。
(3)Reducer: 是一类函数，将以后 State 和 Action 传入，创立和返回一个新的 State
(4)Store：Redux 只有一个 Store, 通过以后的 State 和 Action, 传给单个 Reducer 来更新 state。
①store.createStore(reducer, [initialState]), 第一个参数是一个 reducer 函数，第二个参数是任意类型的数据，是初始化的 state
②store.dispatch(action)：承受一个 action, 而后散发到对应的 Reducer 上，而后更新 state
③store.subscribe(fn): 承受一个函数，每次散发结束一个 action 后触发。返回一个函数，执行这个返回函数就能够退订。
15、React Router；在单页面利用中，浏览器的历史记录，书签，后退，后退在没有路由转发解决方案的状况下将无奈失常工作。路由转发能够标记客户端申请的内容，以便 JS 能够加载和渲染相应的用户界面。
(1)装置 react-router-dom
(2)导出一些组件
(3) 在根组件中应用 Router
在 Route 标签中应用 path=”/:id”，能够将 url 的参数存在 match.params 对象中：
在父组件中定义承受参数：
在子组件中取得这个 id 参数：
父子路由：
App 组件：
一级路由：
二级路由：
16、疾速搭建一个 react 我的项目
(1) 应用 create-react-app:
①npm i -g create-react-app
②create-react-app my-project-name: 疾速构建一个 react 我的项目
③npm start 运行 react 我的项目
(2) 应用 Ant Design Pro
①先创立一个我的项目文件夹 proj1
②cd proj1
③npm create umi
④抉择 ant-design-pro，等它装置完
⑤npm i 装置依赖
⑥npm start 运行我的项目