React
2024-05-28 20:32:42 51 举报AI智能生成
React相关知识点React相关知识点React相关知识点React相关知识点React相关知识点React相关知识点
作者其他创作
大纲/内容
組件
API
<pre><span>setState</span><span>(</span><span>object</span><span> nextState</span><span>[,</span><span> </span><span>function</span><span> callback</span><span>])：创建一个state，当是非同步。React会批量处理，重绘完后触发回调</span></pre>
子主题
<pre><code><span>function createClass({})：创建组件，并返回该组件对象</span></code></pre>
<span>object PropTypes：</span>验证输入
<span>function getDefaultProps：初始化组件属性</span>
getInitialState
<pre><code>function render：创建模版</code></pre>
document <span>ref：绑定的dom对象</span>
<span>function </span><span>componentWillMount()</span><span>：</span>开始插入真实DOM
<span>function </span><span>componentDidMount()</span><span>：</span>插入真实DOM完成
<span>function </span><span>componentWillUpdate(object nextProps, object nextState)</span><span>：开始</span><span>重新渲染</span>
<span>function </span><span>componentDidUpdate(object prevProps, object prevState)</span><span>：</span><span>重新渲染完成</span>
<span>function </span><span>componentWillUnmount()</span><span>：</span><span>已移出真实 DOM</span>
<span>function </span><span>componentWillReceiveProps(object nextProps)</span><span>：</span><span>已加载组件收到新的参数时调用</span>
<span>function </span><span>shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用</span>
<pre><code>function getInitialState(): object：设置初始state</code></pre>
记
ref：节点实例
组件创建
creatClass
extend React.Compoent
extend React.PureCompoent
已经定义好了shouldUpdateComponent数据变化检测
<pre><code>Children：子节点（</code><span>undefined、object、Array</span><span>）</span></pre>
<span>props：用于父组件传递值，值是不可变的</span>
children：组件所包涵的子节点，使用<span>React.Children.map遍历</span>
state：状态属性，值是可变的
<h3>immutable：<span>持久化数据结构并共享，在节点数据变化时只修改该节点何父节点</span></h3>
工具
容器组件
Redux
Action
action type
index
type
filter
Action 创建函数
Reducer
Store
State
数据流
只能调用 store.dispatch(action)
通过Redux store 调用传入的 reducer 函数
reducer 应该把多个子 reducer 输出合并成一个单一的 state 树
Redux store 保存了根 reducer 返回的完整 state 树
中间件
Selector：使用缓存来优化state变化后渲染视图的性能
redux-saga：异步处理
redux-logger：日志
redux-trunk：处理异步操作
redux-promiss：处理异步操作，actionCreator的返回值是promise
flux
dva
<h3>[function dispatch():Action]： </h3>
Reducer：同步的，相同输入得出相同结果
Effect：用于异步操作，相同输入可能得出不同结果
Subscription：从订阅的源获取数据
mobx
无需返回新状态
可观测变量
使用 @inject指令进行缓存
视图组件
JSX
事件绑定：react使用事件代理，再document上监听所有事件，通过target触发对应节点的事件
特点
<span>使用大、小写的约定来区分本地组件的类和 HTML 标签。</span>
<pre><span>render内有且只能有一个根标签包涵所有</span></pre>
raodhog：create-react-app的改进
优点
更好的错误提示
mock：<span>基于 require 动态分析的实时刷新</span>
特点
css嵌套在js中
ant
详细文档地址：https://gitee.com/jikold/booturl <br>或者：https://github.com/dongyanghe/booturl
0 条评论
下一页
