98猛虎的博客

1、React DOM使用camelCase（驼峰命名）属性命名约定  ，例如：类名 应该是 className 在jsx中 tabindex 应该是tabIndex.2、当使用jsx定义dom元素的时候有两种写法：当只有简单一行的时候：const element = <div>vewevw</div> 否则需要使用括号括起来 （注意是圆括号不是花括号）3、创建组件...

定义: Render Props 顾名思义就是我们传一个Props名为Render(但其实命名是随意的)什么时候使用:  和高阶组件有点类似，当我们需要共享一些功能的时候，可以将这些功能提取成组件，并且使用组件的时候，在外部自定义我们的render, 然后再组件的render中调用它，例如class Mouse extends React.Component { constructo...

React渲染过程我们都知道使用React可以使得网页的性能有很大的提高，本文具体探究它是通过什么样的渲染机制做到的。在页面一开始打开的时候，React会调用render函数构建当前页面的一棵Dom树，在state/props发生改变的时候，render函数会被再次调用渲染出另外一棵树，接着，React会用对两棵树进行对比，找到需要更新的地方批量改动Diff 算法这个过程中，比较两...

当我们需要像很多组件共享一些Props的时候，就可以使用Context，但是不要使用太多，使用太多会导致组件的复用性下降。如何创建一个Contextconst { Provider, Consumer } = React.createContext(defaultValue)解构出来的Provider和Consumer是两个组件，而且这个默认值是当Consumer在上层早不到Prov...

使用 ConcurrentMode 组件包裹的子组件的渲染过程的优先级会被降低，react 会先渲染优先级高的，然后将js线程空闲出来先干其他的事，如动画的渲染，完了之后再渲染优先级低的，当我们想提高子组件渲染的优先级的时候，可以使用flushSync方法来包裹需要进行的操作。...

hooks 的作用可以在 function component 中使用 hooks，如 useState、useContext 等，让它具有 class 才具有的一些特性。并且在 class 中，hooks 是不管用的，因此不能使用。useStatestate hooksimport React, { useState } from 'react';function Example(p...

使用场景ReactDOM.createPortal(child, container)将 child 挂载到 container 中去。通常，当您从组件的呈现方法返回一个元素时，它会作为最近父节点的一个子节点挂载到DOM中。然而，有时将子元素插入DOM中的不同位置是很有用的。Portal 的一个典型用例是当父组件具有 overflow: hidden or z-index 样式，但您需要子...

render( <App> <Profiler id="Navigation" onRender={callback}> <Navigation {...props} /> </Profiler> <Profiler id="test" onRender={test}> <Test...

StrictMode 是一个工具，用于突出应用程序中的潜在问题。与 Fragment 类似，StrictMode 不呈现任何可见 UI。它为它的后代启动额外的检查和警告。import React from 'react';function ExampleApplication() { return ( <div> <Header /> ...

// React.lazy 一般用来做代码分割, 且必须放到 suspense 下面const OtherComponent = React.lazy(() => import('./OtherComponent'));// 只要放到 suspense 下面就可以，不一定是直接子级。 fallback 接受任意的 react element, 表示等待下面的组件加载的时候显示的内容。f...

官方提供了一个包create-react-class， 使用方法像下面这样var createReactClass = require('create-react-class');var Greeting = createReactClass({ render: function() { return &lt;h1&gt;Hello, {this.props.name}&lt;...

jsx语法糖&lt;MyButton color="blue" shadowSize={2}&gt; Click Me&lt;/MyButton&gt;上面的jsx其实是这样的React.createElement(component,props,...children)即:React.createElement( MyButton, {color:'blue',shadowSize:...

类型检查时为了避免像组件中传入不必要的数据类型，从而导致一些不必要的bug。下面是学习PropTypes的时候的一些笔记声明为js类型 optionalArray: PropTypes.array,//数组 optionalBool: PropTypes.bool,//布尔 optionalFunc: PropTypes.func,//function optionalNumber:...

什么时候使用当需要访问当前的DOM节点或者当前的react组件的时候可以使用（例如文本框获取焦点等）,但是不要过度使用该属性使用Refs方法使用React.createRef()创建这个属性，使用current来得到当前的DOM节点或者React组件例如: 将ref添加到DOM节点上 class CustomTextInput extends React.Component...

在正式项目当中我们一般是使用react-redux这个库提供的 Provider 和connect这两个库来关联react和redux，但是我们也可以使用手动关联，在学习过程当中不要求接近，理解最原始的方法更有助于我们学习和进步手动关联使用react来展示界面，使用redux的store来存储数据，在react当中使用store.getState() 来获取当前的数据，并且展示子啊界面上...

当我们存在以下情况的时候，往往会出项问题class Table extends React.Component { render() { return ( &lt;table&gt; &lt;tr&gt; &lt;Columns /&gt; &lt;/tr&gt; &lt;/table&gt; )...

const FancyButton = React.forwardRef((props, ref) => ( <button ref={ref} className="FancyButton"> {props.children} </button>));// You can now get a ref directly to the DOM bu...