React 简书

create-react-app   jianshu

 

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

https://github.com/chochinlu/blog/issues/126 https://blog.youkuaiyun.com/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