React 简书

create-react-app   jianshu

yarn add styled-components -D       利用js写css样式  样式会更高效

https://github.com/chochinlu/blog/issues/126

https://blog.csdn.net/weixin_43801564/article/details/86713318     关于全局样式  原方法淘汰替代的语法

-:）》》》》》为样式生成唯一的 class name. 开发者不必再担心 class name 重复,覆盖和拼写错误的问题

yarn add react-transiation-group     　　　 安装一个js动画效果的外包辅助工具

https://reactcommunity.org/react-transition-group/css-transition

https://segmentfault.com/a/1190000015487495       js封装的动画库  H5  原生就是H5动画

-:）》》》》》会给子级增添动画属性 ，针对包含的子级添加css样式 

yarn add redux  -D         redux

yarn add react-redux   -D                              安装公共数据 存储对象

Redux  连贯套路

创建stroe----创建reducer ----放入store----reducer(放入action，一个状态)--------connect(给一个状态type)---------reducer(通过action.type  更改state中的数据)

无状态组件

里面没有任何的 状态 所有的数据都是从 props中拿到的，redux中拿到的数据和方法

const   组件 = （props）=》{

　　return（

　　　　<BigDiv>

　　　　　　<i >{props.data}</i>

　　　　</BigDiv>

　　）

}

yarn add immutable -D

对数据进行 immutable 管理

import { fromJS } from 'immutable';

---------------------------------------------------------------------------------------------------------------------------------

reducer  设置更新数据的时候

　　 单个  return state.set('listData',fromJS(action.data))

　　 多个   return state.merge({       listData:fromJS（action.data）,artData:fromJS(action.data)               })

-----------------------------------------------------------------------------------------------------------------------------------

/通过行内传递参数

<img imgUrl="http://123.png"/>

styled    就可以通过  background:url(${(props)=>props.imgUrl});

-----------------------------------------------------------------------------------------------------------------------------------

配合 Purecomponent    使用    ：它的作用  一处修改不会页面全部重新渲染   修改哪里 重新渲染哪里

！！！！注意  只有用了 immutable 才可以使用该方法

路由配合单页面内跳转

首页跳转详情页  加id   动态路由配置

动态路由  常用格式

请求完整的流程   分析图

字符串转移为html代码 (编辑器写入一段带HTML格式的存入了数据库，数据库拿出来用这个转为HTML代码)

dangerouslySetInnerHTML={{__HTML:this.props.String}}

判断显示哪一个块，显示登陆  or  注册（代码块）

render(){

　　if(true){

　　　　return(<div>登录</div>)

　　}else{　　

　　　　return(<div>注册</div>)

　　}　　

}

重定向Redirect

import { Redirect } from 'react-router-dom';

<Redirect to="/" />

Input  ref获取表单的里面的数据

异步优化分页代码（配合withRputer）

异步

shouldComponentUpdate    底层是这个但是很麻烦 ，很繁琐
利用第三方辅助   react-loadable     

优化异步 请求分页文件

react-loadable

import React fron 'react';
import Loadable from 'react-loadable';

const LoadableComponent = Loadable({
loader: () => import('./'),
loading(){
　　　　return <div>页面正在加载中 ...</div>
　　}
});

export default ()=> <LoadableComponent/>

放在index.js 根目录文件夹下

app.js 路由跳转 到 detail.js 的时候 先进入loadable.js
import Detail from './pages/detail/loadable.js';

然后在 index.js 中映入 loadable 文件 ，引入包裹组件

但是原先的 router 中的 id 就会找不到 ，那么就用到withRouter

解决办法：

withRouter from 'react-router-dom';

包裹在 connect(withRouter(detail))

原代码 来资源 react-loadable

export default class App extends React.Component {
render() {
　　return <LoadableComponent/>;
　　}
}

项目打包上线  

npm run build 

生成文件夹  build   里面的全部文件给到 后台  XAMPP /htdocs 文件 

build里面的文件全部放入，访问后台服务器  测试服务器为 127.0.0.1   本地服务器

打包空白   pack.json   添加 homepae:'./'

项目前期完整框架搭建------后期就好做多了 （填充内容）

7-1　　项目目录搭建，Styled-commponents与React。

https://pan.baidu.com/s/1b7LIIh9l_VbJIjMEM9t_qA

7-2　　使用 Styled-commponents完成Header组件布局（1）

https://pan.baidu.com/s/1K45oL0wjqYmbnkPhbUU0DA

7-3　　使用 Styled-commponents完成Header组件布局（2）

https://pan.baidu.com/s/1e9kPIdaoqfCVqMv3hkkb8A

7-4　　使用iconfont潜入字体图标    https://www.iconfont.cn/

https://pan.baidu.com/s/1PdTkiw6tWGOpli2Q92tDJQ

7-5　　搜索框动画效果实现

https://pan.baidu.com/s/11gikpHUejCC0Wtescc9rzw

7-6　　使用React-redux 进行应用数据的管理

https://pan.baidu.com/s/1X4ngbC4_2xP45c_tOVowVA

7-7　　使用combineReducers 完成对数据的拆分

https://pan.baidu.com/s/1QG0Z6vPnEZFYg2urLhyUVQ

7-8　　actionCreators.js    and 　　actionTypes.js  的封装

https://pan.baidu.com/s/1_PQ3b5ITUH6t45vdypxXSw

7-9　　immutable   对存储在 {store}中的数据管理

https://pan.baidu.com/s/1QmbGDNtxCXNNeY-ObA1How

7-10　  redux-immutable 对数据的统一管理

https://pan.baidu.com/s/10TIT2-__u0Va5GbY6IaylQ