yzkdcsdn的博客

1.发送axios请求后端（这里就不展示了） 2.直接上干货 描述： 首先有form表单 其次有select组件 在这里我使用的是可以下拉搜索得（antd里面可以查到） 重点是这段代码 {dataSource && dataSource.map(item => ( <Option key={item.id}>{item.area}</Option>)) } 在这里要千万记住item箭头后面得渲染html得代码用圆括号（），而不是中括号{}！

我们在使用react框架时有时候会用到hook，hook是react16.8新增的一个特性，作用就是让无状态组件/函数组件 可以使用状态、ref等一些特性 Hook不能在class组件中使用 Hook在使用过程中会遇到以下问题 因为React默认组件是使用的大写字母开头，而自定义Hook函数使用的是use开头，所以我们这里需要修改有两种办法，最简单的就是将函数名a修改为A，这样就不会报错了。 ...

我们在使用tr、td等表格类的时候会经常遇到这样一个问题 英文大致意思如下： 警告：ValidatedMonitoring（…）： <tr>不能显示为<table>的子级。向代码中添加<tbody>， 以匹配浏览器生成的DOM树。 解决这个问题也很简单，因为提示已经告诉我们只需要加个tbody就可以了，所以我们在tr的外层加一层tbody就可以了，示例如下： 学费了吗？！！！ ...

1、列表渲染循环过程中遇到的问题 我们在做项目的时候是不是会出现这样的问题，虽然他不影响程序的正常运行，但是我们看着很难受，所以应该怎么做呢？ 很简单很简单： 循环的时候加个key={i} 虽然加或者不加不会影响程序的运行，但是加总比不加好吧。 如下图：此时我们应该给循环那一块的父元素加上key作为唯一标识： 如上图所示，此时浏览器就不会报错了！ 很简单吧！ ...

日常在使用react搭建脚手架做项目的时候，在运行项目的时候会出现以下报错则意味着脚手架与浏览器已装的react工具也可以叫浏览器的react插件冲突，所以会导致页面不出来，呈现空白，报错如下: 解决方法如下： 1、关闭此插件和此工具 2、上面方法不适用，可以打开你的项目，找到所有依赖–node_modules,在此文件夹下找到@pmmmwh/react-refresh-webpack-plugin此文件夹，在文件夹下找到client文件夹并打开，此时会发现一个js文件，文件名为ReactRefresh

React 如何实现组件传值正向传值--使用 props（父发送数据，子接收数据）逆向传值---函数传值跨组件传值---context 正向传值–使用 props（父发送数据，子接收数据） 逆向传值—函数传值 子组件通过事件调用函数传递 在子组件中使用 this.props.调用的函数名绑定发送数据 在父组件中进行函数传递 同级传值—pubsub-js 在第一个要传值的组件中进行数据抛出 PubSub.publish(" 事件名","数据") 在第二个要接收数据的组件中接收 PubSub.subscrib

• 作用：让无状态组件可以使用状态和 react 的其他特性 • useState() React 提供最基础、最常用的 Hook，主要用来定义和管理本地状态 • useRef() 获取 DOM 节点 • useEffect() 无状态组件使用生命周期 • useReducer() 防止 state 里面的数据操作太复杂，减少 state 的数据操作复杂 度 ...

react diff 原理 把树形结构按照层级分解，只比较同级元素。 给列表结构的每个单元添加唯一的 key 属性，方便比较。 React 只会匹配相同 class 的 component(这里面的 class 指的是组件的名字) • 合并操作，调用 component 的 setstate 方法的时候, React 将其标记为 dirty到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制 选择性子树渲染。开发人员可以重写 shouldComponentUpda

React 生命周期函数的三个阶段 React 生命周期分为三种状态：挂载阶段、更新阶段、卸载阶段 1、始化阶段: getDefaultProps:获取实例的默认属性。 getInitialState:获取每个实例的初始化状态。 componentWillMount: 组件即将被装载、渲染到页面上。 render:组件在这里生成虚拟的 DOM 节点。 componentDidMount:组件真正在被装载之后。 2、运行中状态: componentWillReceiveProps:组件将要接收到属性的时

React 的核心就是组件： 组件的设计目的是提高代码复用率，降低测试难度和代码的复杂程度。 提高代码复用率：组件将数据和逻辑进行封装。 降低测试难度：组件高内聚低耦合（各个元素高集成度低关联性），很容易对单个组件进行测试。 代码的复杂程度：直观的语法，可以极大提高可读性。 ...

React 组件之间的数据传递正向传值--使用 props逆向传值---函数传值同级传值---pubsub-js跨组件传值---context 正向传值–使用 props 父组件发送数据在子组件中使用 this.props.xxx 来接收数据，如果父级的某个props 改变了，React 会重渲染所有的子节点 逆向传值—函数传值 子组件通过事件调用函数传递 在子组件中使用 this.props调用的函数名绑定发送数据。 在父组件中进行函数传递。 父组件中必须要有一个形参用来接收子组件发送过来的数据。 同

React 中 State 与 props 区别 state： state 就是状态，它只是用来控制这个组件本身自己的状态，我们可以用 state来完成对行为的控制、数据的更新、界面的渲染，由于组件不能修改传入的 props，所以需要记录自身的数据变化。 要想修改 state 中的数据，可以使用 setState(),setState() 是异步的会自动 触发 render 函数的重新渲染。 props： props 是组件对外的接口，使用 props 就可以从外部向组件内部进行数据传递完成父组件传值

react 定义特点核心优点 定义 React 起源于 Facebook；React 是一个用于构建用户界面的 javascript 库。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它 特点 声明式设计 −React 采用声明范式，可以轻松描述应用。（开发者只需要声 明显示内容，react 就会自动完成） 高效 −React 通过对 DOM 的模拟，最大限度地减少与 DOM 的交互。 灵活 −React 可以与已知的库或框架很好地配合组件 − 通过 React 构建组件，使得