这是我参与「第五届青训营」伴学笔记创作活动的第 3 天

React学习笔记

React的设计与实现-响应式编程

状态更新，UI自动更新
前端代码组件化，可复用，可封装。
状态之间的互相依赖关系，只需声明即可

React的设计与实现-组件化

组件是组件的组合/原子组件
组件内拥有状态，外部不可见
父组件可将组件传入组件内部
组件设计声明了状态和UI映射，组件有props和state两种状态，组件可由其他组件拼装而成。
组件内部拥有私有状态State，组件接收外部的props状态提供复用性
根据当前的state/props,返回一个UI

React的设计与实现-生命周期

React的写法

import React.{usestate}from 'react'
function Example(){
const [count, setCount] = useState(0);
return (
<div>
<p>you clicked {count} times</p>
<button onclick={() => setCount(count + 1)}>
click me
</button>
</div>

)
}

React的实现

要注意的点

JSX不符合JS标准
返回的JSX发生改变时如何更新DOM
State/props更新时，要重新触发render函数

状态管理库-redux

几个重要概念

aciton

这个 action 指的是视图层发起的一个操作，告诉Store 我们需要改变。比如用户点击了按钮，我们就要去请求列表，列表的数据就会变更。每个 action 必须有一个 type 属性，这表示 action 的名称，然后还可以有一个 payload 属性，这个属性可以带一些参数，用作 Store 变更：

const action = {
  type: 'ADD_ITEM',
  payload: 'new item', // 可选属性
}

Store

在 redux 里面，只有一个Store，整个应用需要管理的数据都在这个Store里面。这个Store我们不能直接去改变，我们只能通过返回一个新的Store去更改它。redux提供了一个createStore来创建state

import { createStore } from 'redux'
const store = createStore(reducer)

reducer

它专门用来发出action，不过还好，这个dispatch不需要我们自己定义和实现，redux已经帮我们写好了，在redux里面，store.dispatch()是 View发出 Action 的唯一方法。 dispatch 发起了一个 action 之后，会到达 reducer，那么这个 reducer 用来干什么呢？顾名思义，这个reducer就是用来计算新的store的，reducer接收两个参数：当前的state和接收到的action，然后它经过计算，会返回一个新的state。

const reducer = function(prevState, action) {
  ...
  return newState;
};

React学习 | 青训营笔记