- 博客(11)
- 收藏
- 关注
RSS订阅原创 React中的hooks
一.useStateuseState会帮助我们定义一个 state变量，useState 是一种新方法，它与 class 里面的 this.state 提供的功能完全相同。一般来说，在函数式组件中退出后变量就会”消失”，而 state 中的变量会被 React 保留。useState接受唯一一个参数，在第一次组件被调用时使用来作为初始化值(也可以是一个回调函数)。（如果没有传递参数，那么初始化值为undefined）。const [state, setstate] = useState(() =&
2022-01-25 16:58:21
665
原创 React的fragment使用
在开发中，我们总是在一个组件中返回内容时包裹一个div元素：希望可以不渲染这样一个div应该如何操作呢？使用fragment,它允许将子列表分组，而无需向 DOM 添加额外节点;短语法: <> </>；注意: 如果我们需要在Fragment中添加key，那么就不能使用短语法!...
2022-01-13 13:24:19
251
原创 react中Portals的使用
某些情况下，我们希望渲染的内容独立于父组件，甚至是独立于当前挂载到的DOM元素中（默认都是挂载到id为root的DOM元 素上的）。例如:实现全局Model;portal:第一个参数（child）: 是任何可渲染的 React 子元素，例如一个元素，字符串或 fragment；第二个参数（container）: 是一个 DOM 元素,用于挂载child；使用:ReactDOM.createPortal(child,container )示例演示:...
2022-01-13 13:18:54
218
原创 react中的高阶组件
什么是高阶函数?高阶函数的维基百科定义：至少满足以下条件之一:接受一个或多个函数作为输入；输出一个函数；JavaScript中比较常见的filter、map、reduce都是高阶函数;什么是高阶组件呢？1. 高阶组件的英文是 Higher-Order Components，简称为 HOC； 2. 官方的定义：高阶组件是参数为组件，返回值为新组件的函数；3. 组件是将 props 转换为 UI，而高阶组件是将组件转换为另一个组件;4.高阶组件并不是React API的一部分，它是基
2022-01-13 12:14:46
1034
原创 React中的受控组件和非受控组件
在 HTML 中，表单元素（如、 和 ）之类的表单元素通常自己维护 state，并根据用户输入进行更新;React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 **setState()**来更新, 将两者结合起来:使React的state成为“唯一数据源”,;渲染表单的 React 组件还控制着用户输入过程中表单发生的操作(change);被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”.推荐使用受控组件，可以避免对re
2022-01-12 19:38:39
106
原创 react的样式
前端已经是组件化的天下,而CSS的设计并不是为组件化而生的,所以在目前组件化的框架中都需要一种合适的CSS解决方案; React官方并没有给出React中统一的样式风格, 因此 从普通的css,到css modules ,再到css in js 等 ,有几十种不同的解决方案,上百个不同的库;在组件化中选择的合适CSS解决方案应该符合以下条件:可以编写局部CSS,具备局部作用域,不会随意污染其他组件中的元素;可以编写动态的CSS,可以获取当前组件的一些状态,根据状态的变化生成不同的css样式;支持所
2022-01-12 18:41:04
981
原创 react中ref的使用
在React的开发模式中，通常情况下不需要、也不建议直接操作DOM原生，但是某些特殊的情况，确实需要获取到DOM进行某些操作：管理焦点，文本选择或媒体播放；触发强制动画；集成第三方 DOM 库；如何创建refs来获取对应的DOM?方式一:传入字符串使用时通过 this.refs.传入的字符串格式获取对应的元素； constructor函数中创建: this.titleRef = createRef(); {/* <h2 ref=字符串/对象/函数>Hello Rea
2022-01-11 19:57:05
193
原创 react性能优化
一.React更新机制1. react的渲染流程:#mermaid-svg-K1nxqArMDzQRpVAZ .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-K1nxqArMDzQRpVAZ .label text{fill:#333}#mermaid-svg-K1nxqArMDzQRpVAZ .node r
2022-01-11 19:00:34
390
原创 react 中的 setState
一.为什么使用setState?在开发react项目时,我们并不能直接通过修改state的值来让界面发生更新,修改了state之后，希望React根据最新的State来重新渲染界面，但是这种方式的修改React并不知道数据发生了变 化；React并没有实现类似于Vue2中的Object.defineProperty或者Vue3中的Proxy的方式来监听数据的变化；需要通过setState来告知React数据已经发生了变化, setState方法是从Component中继承过来的:二.se
2022-01-07 17:37:41
680
原创 组件间的通讯-React篇
React组件间的通讯1. 父组件传递子组件 - 类组件和函数组件类组件:函数组件:传入数据类型校验(属性验证 - propTypes) 以及 默认值设置(defaultProps):2.子组件传递父组件同样是通过props传递消息，只是让父组件给子组件传递一个回调函数，在子组件中调用这个函数即可；3.跨组件间的通讯方式一: 通过上面的props,一层层的传递;方式二: 通过context;方式三: 事件总线;方式四 redux - 后续更新方式二:contextR
2022-01-07 16:41:36
62
原创 继承
继承-子承父业面向对象编程语言的三大特点:封装,继承,多态hasOwnProperty使用:1.混入式继承2.原型链继承方法一:手动给原型添加成员(麻烦)方法二: 原型替换3. 混入+原型链继承4.经典继承面向对象编程语言的三大特点:封装,继承,多态hasOwnProperty使用:1.语法:obj.hasOwnProperty(propname);2.作用:判断propname属性是不是obj对象自己的;3.hasOwnProperty来源:Object.prototype (Object的原型
2020-06-02 14:44:17
107
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人