✍️ 正文

react：用于构建用户界面的js库

zustand ，valtio 、jotai

是一个将数据渲染为html视图的开源javascript库

• 模块化和组件化，提高复用，结构更加清晰，有序
• 核心逻辑：类组件
  • state：初始化数据
  • render方法去渲染页面
  • 类的方法函数：完成业务逻辑，用赋值语句＋箭头函数来指定
    • 然后用this.setState来改变类中的数据，改变组件的状态
• 基础
  • 三大包：React、ReactDOM、PropTypes
  • 动态页面和静态页面
  • 数据单向流动
  • 虚拟DOM
    • 本身是一个Object类型的对象（一般对象）
    • 虚拟DOM比较轻，属性比较少
    • 真是DOM比较重，所有的属性都具备
    • 虚拟DOM最终会被React转化为真实DOM，进行渲染
  • JSX语法 javascript XML
    • html、js和css混写
    • 语法规则
      • 定义虚拟DOM时，不要写引号
      • 标签中混入JS表达式时要用
      • 样式的类名指定不要用class，要用className
      • 内联样式，要用style={{key:value}}的形式去写
      • 虚拟DOM必须只有一个根标签
      • 标签必须闭合
      • 标签首字母：如果小写，则转换成html中的同名元素；以大写字母开头，则是react中的组件component
      • 语句代码：if、for、switch
      • 表达式：变量、数组、函数
    • jsx会被babal转化为js可以识别的代码

• ** jsx组件

  • 类式组件：主要使用，react的精髓

    class MyComponent extends React.Component
    {
        render() {
            return (
                html标签语言
            )
        }
    }
    

    • 创建类必须继承React.Component
    • 类名则是组件名
    • 使用组件标签的时候，React帮你new 新建了该类的实例，调用了原型的方法
    • 里面使用this，则指向该实例对象，也是组件的实例对象

  • 函数式组件，用的比较少，只能接受props，不能使用state和refs，新版本用hooks可以使用

    function MyComponet() 
    {
     return <h2>hello</h2> 
    }
    

    • 函数必须有返回值，一般返回html标签或者自定义组件标签
    • 用函数定义组件，组件要求首字母大写，则对于的函数组件作为标签渲染，也需要首字母大写
    • 函数接收的参数，是传给他所有的属性的对象集合props

  • 组件用标签的形式渲染

  ---

  • 有状态的组件称为复杂组件：
  • 受控组件：输入类的组件的值在状态中维护，输入值将会同步到状态中，取值从状态中取；非受控组件：现用现取，从原始输入框中取值
  • 受控组件，由react控制数据变化，最终值都存在变量之中，取值要到变量中去取。如输入框中每输入一个字符，就调用一次处理函数。而非受控组件只有整体提交时才会触发调用函数。

  ---

  • 高阶函数：闭包

    • 在调用处理函数的时候，处理函数返回的是一个函数，该函数才是真正的回调。
    • 以上处理的目的是：处理函数获取共用的参数，而处理函数中返回的函数来获取每一次调用中特有的参数。
    • 也是闭包的意义之一，可以等函数调用时再确定参数。

    ---

    • 定义：A被称为高阶函数的要求，满足以下任一点。
    • 1. 接受的参数是一个函数
    • 2. 调用的返回值依然是一个函数
    • 如：Promise函数、setTimeout函数、数组的常用方法

  • 函数柯里化 currying：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。类似于递归。

  ---

  • 组件的生命周期函数

    • 组件的生命周期可分成三个状态：
    • Mounting：已插入真实 DOM
    • Updating：正在被重新渲染
    • Unmounting：已移出真实 DOM

    ---

    • componentWillMount 在渲染前调用,在客户端也在服务端。
    • componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
    • componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
    • shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。可以在你确认不需要更新组件时使用。
    • componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
    • componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
    • componentWillUnmount在组件从 DOM 中移除之前立刻被调用。

• 组件实例的三大属性：props、state、refs

  • state：状态

    • 它的值是对象，可以包含多个key-value的组合
    • 一切数据都是状态：组件被称为状态机，通过更新组件的state来更新对应的页面渲染
    • 可以从组件标签中传递参数到类之中
    • 组件类中，构造函数传递props

    class Weather extends React.Component {
    	constructor(props) {
    		super(props)
    		this.state = {isHot: true}
    	}
    }
    

    • setState异步更新：状态不可以直接更改，需要用setState更改

      this.setState({
      	key：value
      })
      

      • 更新时只会修改指定的属性，原有的不变

  • props：属性，从外面传递数据进来，数据的传递

    • 标签的属性可以用 ...p 这种展开运算符全部传递给对象props中
    • 属性只能由父类传进来，自己不能够修改
    • props为只读的，不能修改
    • PropTypes来限制属性的类型，是否必须、默认值等
      • 限制必须为函数时，关键字为PropTypes.func
      • static propTypes = {}
      • static defaultProps = {}
    • 一般会省略构造函数。构造器是否接收props，是否传递给super，取决于是否希望在构造器中通过this访问props

  • refs：reference，用ref=name，来定位所指向的标签，获得标签中标示的节点对应的属性

    • 它是组件中特殊的props，可以附加到任意一个组件标签中。组件被调用时，会新建一个组件的实例，refs就指向这个实例。

    • 放到原生DOM组件中，得到的就是DOM的节点。可以取代getElementById中的id

    • 在对应的组件类中用this.refs.name来获得对应的节点

    • ❎ 字符串形式，会移除，效率会出现问题

      • ref = "textInput"
      • const { textInput } = this.refs

    • 回调函数形式的ref

      • 内联形式：ref = { (currentNode) => { this.textInput = currentNode }}
      • 简写成： ref =
      • 或者绑定为类的函数：ref = { this.saveInput } ，然后定义该方法，把input1再传过来。

      saveInput = c => {
      	this.textInput = c;
      }
      

    • createRef的方式

      • 首先在类中创造React的一个方法createRef，返回一个容器，该容器可以存储ref所表示的节点
      • myRef = React.createRef()
      • ref =
      • 最后通过 this.myRef.current.value 取到该节点
      • 使用多个ref，需要创造多个myRef

    • 发生事件的元素就是要操作的元素，即事件处理函数和反馈来源于同一个标签，可以在处理函数中给出参数event，在函数中使用event.target.value来调取标签值

• 绑定事件

  • onClick = { func }：注意不要函数不要加()
  • 事件用驼峰命名
  • 通过事件名指定事件处理函数
    • React使用的是自定义（合成）事件，而不是使用原生的DOM事件。 -- 为了更好的兼容性
    • 事件是通过事件委托方式处理的（委托给组件最外层的元素） -- 为了高效
  • 通过event.target得到发生事件的DOM对象 -- 不要过度使用ref

• 组件化编码流程

  • 拆分界面、抽取组件
    • Header
    • LeftMenu
    • AllCate
    • Form
    • Footer
  • 实现静态组件
  • 实现动态组件，使用组件实现静态方法
  • 实现动态组件
    • 动态组件初始化数据
      • 数据类型
      • 数据名称
      • 保存在哪个组件
    • 交互，从绑定事件监听开始

• UI库

  • 按需引入
  • 官网找喜欢的样式
  • 看编码，引入所需的编码
  • 参数可以看API

• 注意点：

  • 不能直接操作state，应该将state赋值给一个变量，操作该变量，最后将变量setState到state中。
  • fragment标签
  • 父组件向子组件传值。子组件不能改变父组件。可以用父组件传过来的方法改变父组件。
  • 业务逻辑校验 proptypes
  • setState为异步服务，可以用它所带的回调函数解决异步的问题
  • 子组件性能优化的问题，父组件的变化引起子组件没必要的更新，造成性能损耗。shouldComponentUpdate(nextProps,nextState){ if(nextProps.content!==this.props.content){ return true }else

• 合成事件和原生事件

• 父组件和子组件的通信

  • 当子组件需要用父组件的数据和方法时
  • 可以把父组件的数据，方法传递给子组件
  • 子组件接受数据和方法

• 路由 react-router-redux和react router 5.0

  • 嵌套路由

• 状态统一管理器 redux flux

  • 管理的分类
    • 服务器级别的状态，组件的数据，用react-redux
    • ui级别的状态，css，可以组件在自己内部维护
    • app的状态
  • 管理state
  • store 核心组件，状态库，联系action和reducer
    • getState() 获取状态
    • store.dispatch(reducer)
    • subscribe 组件注册监听事件
    • 销毁监听事件
  • action
    • 用actionCreator 工厂函数创建action
    • type
    • data
    • 将所有的动作，触发函数都理清楚，整齐的放在这里
  • reducer 处理函数
    • 初始化状态
    • 发送来的action
    • 返回值 return ，新的状态
    • action的处理函数
  • react-redux：redux的stroe管理

📌 大纲

📝 主题描述

🗂️ 目标

🎯 目标和任务分解

🧠 思考的维度

🎉 总结

📖 参考文献