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运行我的项目
发表回复