react学习经验分享 逆战1913
react的特点是:声明式，组件化开发，一次学习，随处编写，灵活简洁。
首先是react环境搭建：
（1） 建立一个项目的目录，在目录中 npm init -y
会在目录中产生一个文件package.json
（2） npm i react --save (或yarn add react)
会在目录中有一个node_modules目录，
找到react目录，
找到这个目录下的umd目录，拷贝umd目录下react.development.js到自己的js目录下
（3） npm i react-dom --save(或 yarn add react-dom)
在node_modules目录下找到react-dom目录，在这个目录下找到umd目录，
在react-dom／umd目录下找到react-dom.development.js文件拷贝到自己的js目录下
（4） npm i babel-standalone --save（或yarn add babel-standalone）
在node_modules目录下找到babel-standalone目录
拷贝这个目录下的babel.js 到js目录下
（5 引入顺序
a）react.development.js
b）react－dom.development.js
c） babel.js
（6） 注意这个问题：script的type属性指定为 text/babel
（7）当我们们要启动一个项目是要 npm start
（8）当我们要修改端口号的时候json-server xxx.json --port 端口-w (修改json数据不用重启)
其次，介绍一下jsx，jsx是JavaScript扩展的意思，它是一种语法糖，相当于js+xml，他不是必须的，但是应用jsx可以提高开发效率，jsx的原理就是React.createElement(tag,{attrs},content)。但是jsx对象不能直接渲染,数组以字符串的形式进行渲染，并且jsx中 class 改为了className，事件的首字母要大写 onXxx 的形式。
然后讲一下挂载阶段四个钩子函数的执行次序：a.constructor(props,context)，b. getDerivedStateFromProps(props,state)，c.render，d.componentDidMount。卸载阶段钩子函数只有一个，componentWillUnmount。最后是更新阶段有三个，分别是shouldComponentUpdate(nextProps,nextState)，getSnapshotBeforeUpdate(prevProps,prevState)，componentDidUpdate(prevProps,prevState,snapshot)。
然后讲一下路由切换，有两种模式，历史记录模式（BrowserRouter）和hash模式（HashRouter）。用法如下：
1).引入 import {BrowserRouter as router} from 'react-router-dom'
2).<Router>根组件</Router>
3).引入 import {Route} from 'react-router-dom'
4). <Route path="xxx" component={组件} />
5). <Link to="path">yyy</Link>
<NavLink to="path">yyy</NavLink> 默认选中有一个类默认的名字叫active
如果部署到nginx服务器上 用BrowserRouter (config /nginx.conf)
location / {
try_files $uri $uri/ /index.html;
}
路由切换的组件有三个属性（props）：history，location和match。用react可以实现精确匹配，用Redirect可以实现重定向，Switch的作用是使多个组件匹配只渲染第一个。例如：
监控路由参数的变化（路由传参），有如下两种方法:
Link to="/xxx/实参/实参2",
path /xxx/:参数/:参数2/... 这叫路由的参数,
接收参数 this.props.math.params.参数.
还有就是编程式导航：this.props.history.push(path)。而this.props.history.push listen go..... 适合做编程式导航和监听路由的变化。
接下来说一下redux, 它是一种状态管理工具，先安装
，或者
两种方式。
redux有三个原则，一是store是唯一的，二是state是只读的，三是通过纯函数reducer能够对状态进行修改。使用步骤
。
这里说一下store ：
1)getState() 获取状态
2) dispatch({type,playload}) 抛发动作给reducer
3) subscribe 监听store里的数据变化。
当把组件拆分为容器组件和UI组件是，UI组件只管渲染，容器组件和store打交道。
接下来说一下context 的使用方法：
1) import {createContext} from 'react'
2) let {Provider,Consumer} =createContext()
3) <Provider value="xx"></Provider>
4) 在组件里拿到 Consumer
5) Consumer 只是能在render进行渲染
在方法里拿到context
使用context传来的数据的组件里写一个 contextType的静态属性
static contextType=context;
设置后，
就可以用 this.context拿到context传过来的数据。
然后是分模块：
接下来说一下react-redux的使用，首先要做的就是下载和引入：
1)yarn add react-redux
2) import {Provider} from 'react-redux'
3) 组件里引入 import {connect} from 'react-redux'
connect 高阶组件连接容器组件和UI组件。
实际上react和redux没有任何直接的关系，redux只是处理数据的方式，可以使用在react中也可以使用在其它任何地方。与react配合使用时可以使用react-redux库提供的方法来提高效率。react-redux库的开发思想是使容器组件和展示组件分离。使用react-redux是因为react提供了很好的视图层的解决方案，但在数据的处理方式是没有提供有效的办法。使用react-redux可以采用redux思想在react应用中管理数据同一根组件下的所有组件共享一份数据，数据放在本组件树中唯一一个store对象中，所有对数据的操作都要通过store执行，通过使用connect创建的容器组件有了监听state变化和派发事件修改state的能力。这样就避免了子组件为了获取数据需要数据层层传递的不便。这里我是借鉴了https://www.cnblogs.com/ssw-men/p/10949490.html这篇博客的思想。
本次分享就到这里，由于技术还是小白，所以没什么特别好的经验分享，只是为了记录一下学习的过程，感谢浏览。