react

react认识

1. 特点
   • 声明式编程
   • 组件化开发
   • 多平台适配
2. 开发依赖
   • react
   • react-dom
   • babel（ES6->ES5）
3. 组件中函数this的绑定
   call、bind、apply
   this.fn.bind(this)
4. jsx
   • 属性
     class -> className
     for -> htmlFor
     style = {{key: “val”, key: 变量}} //小驼峰
   • 事件
     传递参数
   • 条件渲染
     js if判断
     ?:
     & 逻辑与
   • 列表渲染
     map
     fliter
     slice
   • 本质
     React.createElement(component, props, …Children)
     createElement函数-> 虚拟DOM -> React.render 真实DOM
     使用虚拟DOM
     便于跟踪状态
     性能比较低

脚手架

• 安装node
  官网下载并安装 node --version npm --version
• 安装yarn
  npm install -g yarn
  err code eassces 权限报错 前面添加sudo
• 安装react脚手架
  npm install -g create-react-app
• 创建项目
  create-react-app 项目名称
  项目名称不允许有大写字母存在
  yarn start 运行项目
  显示webpack配置: yarn eject 不可逆

组件化开发

• 核心思想：分而治之
• 类别：
  函数组件、类组件
  无状态组件、有状态组件
  展示型组件、容器型组件
  异步组件、高阶组件…
• 类组件

class name extends React.Component{
     constructor() {
         super();
         this.state = {

         }
     }

     render() {
         return <div></div>;
     }
 }

注意：
名称大写开头
继承React.Component类
必须实现render函数
render函数的返回值

• 生命周期
  装载
  更新
  卸载
• 生命周期函数
  Mounting ->constructor -> render ->挂载 -> componentDidMount
  Updating -> render -> updates DOM -> componentDidUpdate
  Unmounting -> componentWillUnmount
  constructor
  this.state 初始化内部状态
  为事件绑定this
  componentDidMount
  组件挂载之后立即调用
  依赖DOM的操作
  发送网络请求
  添加订阅
  componentDidUpdate
  组件发生更新之后
  更新前后对比
  componentWillUnmount
  卸载之前调用
  清除timer、取消订阅
• 组件之间的数据传递
  父–>子
  props
  propTypes 参数类型规范
  defaultProps 默认参数设置
  子传父
  通过触发事件
• 插槽
• 跨组件通讯 Context
  ContextName = React.createContext()
  ContextName.Provider value
  ContextName.Consumer 函数组件使用 {val =>{}}
  ComponentName.contextType = ContextName

setState

• 异步更新
  在react的生命周期以及react事件中异步更新
• 同步更新
  在原生事件中以及定时器中同步更新
• state数据合并
• 组件更新机制
  阻止组件更新
  1、利用生命周期函数
  shouldComponentUpdate(nextProps, nextState) {
  return false;
  }
  2、使用PureComponent类
  使状态变化的组件更新，未发生变化的组件不更新
  原理和shouldComponentUpdate类似：使用浅比较
  注意：setState(()=>{}) //传惨为函数时没有效果，都会更新
  3、使用emeo 高阶组件
  const ComponentMemoName = emeo(ComponentName);
  4、列表中key的作用
  根据key值对应更新
• 传递数据不可变
  setState时: state数据原始值不变，通过setState重新赋值

全局事件 event

• 安装events库
  yarn add events
• 引入 EventEmitter并创建EventEmitter对象
• 发送参数
  EventEmitter.emit(name, props)
• 监听接受参数
  EventEmitter.addEventListener(name, props=>{});

受控与非受控

• ref使用
  1. 字符串：
     this.refs.refName.innerHTML
  2. 对象:
     this.refName = React.createRef();
     this.refName.innerHTML
  3. 函数：
     this.refName = null;
     props => this.refName = props;
     this.refName.innerHTML
• 受控组件：可以自己保存状态的元素
  • 表单元素 双向绑定
    通过监听表单元素的变化，实时更新状态，并且表单元素值绑定状态

高阶组件

实际是一个函数，传参和返回值都是组件
props
Context优化使用

fragment

1. 占位标签，没有意义，不渲染，替换无意义的div等标签
   return (
   
   …
   
   )
2. 短语法：<></>
   不能添加任何属性

StrictMode

开启严格模式 只在开发阶段有作用。只是检查

React.render(
    <React.StrictMode>
        <App/>
    </React.StrictMode>
    ,
    elem
)

• 检查：
  • 不安全的生命周期
    componentWillUnmount —> UNSAFE_componentWillMount
  • 过时的ref API—字符串ref
  • 意外的副作用
  • 废弃的API
  • 过时的Context

react中的css

• 组件化下的css要求：
  编写局部的css,具备局部作用域
  编写动态的css
  编写简单方便

• 方式：

  • 内联样式
    style={{key: val}}
    style = {obj} obj = {key: val}
  • 普通css

• css modules
  修改css名称 .css–>.module.css
  导入css import 自定义名称 from “xx.module.css”;
  引用样式 自定义名称.className

• css in js
  导入css库 比如：import 自定义名称 from “styled-components” 安装之后导入
  创建css组件，并且定义css样式：使用标签模版
  const ComponentName = 自定义名称.标签名称(比如div)<{key:val}>` //key val 变量值
  key:val (color:red) //可写成js代码（?:、函数）
  span {
  //可类似less嵌套样式
  }
  &before{
  //伪元素
  }
  //props使用 ${props} 指的是css组件上传的参数

    `
  

• classname库使用
  是一个函数
  className = className(“name1”, “name2”…)
  className = className({name1: val, …})
  className = className([“name1”, {}, …])

AntDesign组件库—参考官网

• 安装antDesign库
  yarn add antd
• 引入，并且index.js中引入antd样式
  import “antd/dist/antd.css”
• 引入需要使用的组件
  import {} from “antd”;
• 主题样式自定义
  • 安装 craco
    yarn add @craco/craco;
  • 修改根目录下的package.json
    react-scripts --> craco;
  • 修改index.js
    import “antd/dist/antd.css” -->less
  • yarn add craco-less
  • 根目录新建 craco.config.js

      module.exports = {
          plugins: [
              {
                  plugin: CracoLessPlugin,
                  options: {
                      lessLoaderOptions: {
                      lessOptions: {
                          modifyVars: { '@primary-color': '#1DA57A' },//修改主题颜色
                          javascriptEnabled: true,
                      },
                      },
                  },
              },
          ],
      }
      ```
  

axios封装 httpbin.org

axios({
    url:"",
    method:"",//默认get
    data:{},//post 
    params:{}//get
})        
axios.get(url, {})
axios.post(url, {})
axios.all(request1, request2).then(ress => {}).catch(err => {})

过渡动画 react-transition-group

• 安装 yarn add react-transition-group
• 使用：主要是四个组件
  Transition
  CSSTransition
  SwitchTransition
  TransitionGroup
• 属性
  in
  timeout
  className
• css属性
  appear -active
  enter
  exit
• react-transition

纯函数

redux

• 核心理念：
  store
  action
  renducer
• 状态
  创建 createStore
  派发 dispatch
  监听/ subscribe
  取消 unsubscribe
• react-redux
  结合context
  主要函数 connect.js
  connect(state, dispatch)(ComponentEle)
  传递store

中间件

• redux-thunk中间件
  applyMiddleware(thunkMiddleware…)
• redux-devtools 工具
• redux-saga

react-router

• 安装：
  yarn add react-router-dom //会自动安装react-router
• 使用：
  引入 Router、Link、BrowserRouter、NavLink
  
  
  
  
  
  withRouter(component);
  
  
  
• 传参
  /:val
  ?key=val&
  {
  pathname:
  search:“?..”
  state: obj
  }
  matchRouter(routes, url);

hooks

useState
    const [counter, setCounter] = useState(0);
useEffect
    useEffect(()=>{

    }, []);
useContext
    const context = useContext(contextCom)
    context.key
useReducer
    useReducer(state, reducer)
useCallback
    与memo结合使用，父组件更新时，自组件没有变化的时候不更新子组件
useMemo
    useMemo(()=>{

    }, [])
useImperativeHandle
    ref暴露限值
useLayoutEffect
自定义hook
    useName 名称use开头的函数，内部可以使用hook函数

规范

• 文件夹和文件名：小写字母+ “-”
• 驼峰命名：
  常量：大写
  组件：大驼峰
• style:普通css+styled-component
• 函数式组件
• 使用memo
• 内部状态hook（useState…）
• 业务状态：redux
• 函数式组件代码顺序
  组件内部状态state
  redux的hooks
  其他组件hooks
  其他逻辑代码
  jsx代码