API reference about React

最新推荐文章于 2023-07-07 15:59:30 发布

赏花赏景赏时光

最新推荐文章于 2023-07-07 15:59:30 发布

阅读量350

点赞数

分类专栏： react 文章标签： react API

react 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<一>React

1、Components

作用：将UI分成独立的模块，使独立的模块可以重复使用

Components的定义方式：

1）使用ES6子类语法，React.Component、React.PureComponent

2）不使用ES6子类语法，使用模块create-react-class

3）可以定义成函数React.memo

A、React.component-----当使用ES6的class创建components的时候，React.Component是基类

//render函数是必须写的，其他函数是可选的
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

component lifecycle：

1）mounting（挂载）

constructor()
static getDerivedStateFromProps()  //不常用
render()
componentDidMount()

render()----当调用它的时候，会检查属性this.props和this.state,该函数必须返回从下面的类型之一：

1）React elements-----------通常是用JSX创建的元素
2）Arrays and fragments-----返回多个元素
3）Portals------------------渲染子元素大不同的DOM子树中
4）String and numbers-------在DOM中渲染成 text node
5）Booleans or null---------不渲染

注意：render()函数应该是pure----它不会修改component 的state，不会和browser直接交互

如果需要和browser交互，在componentDidMount()或者其他的lifecycle中执行相应的交互

constructor()----在component mount之前调用，不需要初始化本地对象this.state或者不需要将函数绑定到Instance中，则可以不书写constructor()函数

 class SearchBar extends React.Component {
    constructor(props){
        //在书写其他代码之前，先写这句话，否则在constructor中this.props的值为undefined
        super(props);
        this.state = { isLogging:false, name:'' };
        this.handleFilterTextChange = this.handleFilterTextChange.bind(this);
    }          
 }

注意：在constructor()中不可以调用this.setState()，constructor()用来初始化local state,也是唯一的一个初始化this.state对象的地方，在其他函数中，调用this.setState()来修改state

避免在constructor()中将props属性赋值给state

constructor(props) {
 super(props);
 // Don't do this!
 this.state = { color: props.color };
}

componentDidMount()----需要从别的地方下载数据，在这个函数里面操作。如果在componentDidMount()中注订阅了函数，需要在componentWillUnmount()取消订阅

2）updating（更新）-----当组件被重新渲染的时候，下面的方法被调用

static getDerivedStateFromProps()
shouldComponentUpdate()
render()                   //常用
getSnapshotBeforeUpdate()
componentDidUpdate()       //常用

componentDidUpdate()---------初始渲染的时候不会调用该方法

componentDidUpdate(prevProps, prevState, snapshot)

使用场景：当component更新后需要操作DOM；在网络请求中比较当前props和前时刻的props

在使用setState()时，必须使用在条件语句里面，就像下面这个例子

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

3）unmounting（脱钩）----当组件从DOM中移除时，会调用下面的函数

componentWillUnmount()

在组件卸载前调用该函数，清除一些在componentDidMount()函数中定义的一些函数，timer, network request 等

不应该在componentWillUnmount中调用setState()，因为不会re-render

4）error handing---在生命周期函数中或是在constructor中，当渲染发生错误时调用下面的函数

static getDerivedStateFromError()  //不常用
componentDidCatch()                //不常用

component other APIs：

setState()
forceUpdate()

1）this. setState()----用于告诉React组件和其子元素用更新得到state进行re-rendered；也是用于处理页面交互的主要方法

setState(updater[, callback])

注意：该方法并不保证立即更新state，如果想获取更新后的state则调用setState()中的callback或者在componentDidUpdate()中获取

如果下一个状态值依赖当前状态值，setState()的参数推荐使用function

this.setState((state) => {
  return {quantity: state.quantity + 1};
});

this.setState((state, props) => {
  return {counter: state.counter + props.step};
});

this.setState({quantity: 2})

2）forceUpdate()----

class properties：

defaultProps
displayName

defaultProps----设置组件类的默认属性

class CustomButton extends React.Component {
  // ...
}
//通过设置组件类的默认属性
CustomButton.defaultProps = {
  color: 'blue'
};
//在组件里面没有设置详细的color的值，就会使用默认设置的值
render() {
  return <CustomButton /> ; // props.color will be set to blue
}
//不能设置为null，这样在浏览器就不会显示
render() {
  return <CustomButton color={null} /> ; // props.color will remain null
}

displayName----用于debugger

instance properties：

props
state

props----this.props包含了调用组件时所定义的prop

注意：this.prop.children是一个特殊的属性，相当于slot

state----this.state是用户在constructor()中定义的对象，其值可能会随着时间的改变而改变

注意：不能直接修改state的值，需要通过this.setState()方法修改state

2、创建React Elements

1）推荐使用JXS语法，它是React.createElement()的语法糖，使用JSX语法创建元素不需要涉及函数createElemet()、createFactory()

3、转换元素transforming elements

cloneElement()

isValidElement()

React.Children

4、Fragments

React.Fragment----渲染多个元素不需要包裹器

5、Refs

React.createRef

React.forwardRef

6、Suspense---在渲染之前等待其他资源的操作

suspense目前只支持一种情况：使用React.lazy动态加载组件

React.lazy

React.Suspense

<二> ReactDOM

react-dom包提供操作DOM的方法

render()
hydrate()
unmountComponentAtNode()
findDOMNode()
createPortal()

1）ReactDOM.render()----客户端渲染使用该方法

ReactDOM.render(element, container[, callback])

2）ReactDOM.hydrate()----服务端渲染使用该方法

ReactDOM.hydrate(element, container[, callback])

3）ReactDOM.unmountComponentAtNode()----用于移除一个挂载的组件

ReactDOM.unmountComponentAtNode(container)

4）ReactDOM.createPortal()----将渲染的children插到DOM节点中，而该节点可以在当前组件DOM结构外

ReactDOM.createPortal(child, container)

5）ReactDOM.findDOMNode()----在严格模式中被移除

<三> DOM elements

在React中DOM的所有properties和attributes都是驼峰写法，自定义属性都是小写

//驼峰写法
HTML attribute tabindex：tabIndex in React

//自定义属性都应该小写
aria-* and data-* attributes：都应该是小写

在React中的DOM的属性和HTML中的属性有很大的区别

checked

//设置组件是否被选中
<input type='checkbox' checked>
<input type='radio' checked>
属性defaultChecked 设置组件第一次挂载的时候是否被选中

className

在React中，在自定义组件或者DOM或者SVG上面明确使用的类用属性className代替class

dangerouslySetInnerHTML---替代innerHTML

function createMarkup() {
  return {__html: 'First &middot; Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

htmlFor---------for用于js，所以属性for改成htmlFor

onChange------当form中的元素的值发生变化的时候，就会触发该事件，用户依赖该事件实时处理用户的输入

selected---------用于<option> 组件,设置选中选项

style---------------推荐使用className代替style

注意属性style的值是一个对象，并且该对象的属性是驼峰写法

const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}

suppressContentEditableWarning-------

suppressHydrationWarning-------------

value-----------------<input>、<textarea>支持可用于controlled元素，defaultValue用于uncontrolled元素，第一次挂载的时候调用

除了上面属性外，React还支持自定义属性但是必须全部小写

<四> SyntheticEvent---合成事件

浏览器底层事件

boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
number eventPhase
boolean isTrusted
DOMEvent nativeEvent
void preventDefault()
boolean isDefaultPrevented()
void stopPropagation()
boolean isPropagationStopped()
DOMEventTarget target
number timeStamp
string type

如果想在异步函数中访问event的properties，调用e.persist()

Reat支持的事件

Clipboard Events
Composition Events
Keyboard Events
Focus Events
Form Events
Mouse Events
Pointer Events
Selection Events
Touch Events
UI Events
Wheel Events
Media Events
Image Events
Animation Events
Transition Events
Other Events

1）Clipboard Events----剪贴板事件

//事件名
onCopy-----赋值
onCut------剪切
onPaste----粘贴

//属性
DOMDataTransfer 
clipboardData

2）Composition Events----组合事件

//事件名
onCompositionStart 
onCompositionUpdate
onCompositionEnd 

//属性
string data

3）Keyboard Events----键盘事件

//事件名
onKeyDown 
onKeyPress
onKeyUp

//属性
boolean altKey
number charCode
boolean ctrlKey
boolean getModifierState(key)
string key
number keyCode
string locale
number location
boolean metaKey
boolean repeat
boolean shiftKey
number which

4）Mouse Events----鼠标事件

//事件名
onClick        onDoubleClick  
 
onContextMenu  onDrop 

onDrag         onDragStart     onDragEnd   
onDragEnter    onDragExit      onDragLeave     onDragOver 

onMouseDown    onMouseUp        
onMouseEnter   onMouseOver     onMouseMove     onMouseLeave    onMouseOut      

//属性
boolean altKey
number button
number buttons
number clientX
number clientY
boolean ctrlKey
boolean getModifierState(key)
boolean metaKey
number pageX
number pageY
DOMEventTarget relatedTarget
number screenX
number screenY
boolean shiftKey

5）Focus Events----聚焦事件

//事件名
onFocus 
onBlur

//属性
DOMEventTarget 
relatedTarget

6）Form Events----表单事件

onChange 
onInput 
onInvalid 
onSubmit

7）Pointer Events----光标事件

//事件名
onPointerDown 
onPointerUp 
onGotPointerCapture
onPointerEnter 
onPointerOver 
onPointerMove 
onPointerLeave 
onPointerOut
onPointerCancel 
onLostPointerCapture
 
//属性
number pointerId
number width
number height
number pressure
number tangentialPressure
number tiltX
number tiltY
number twist
string pointerType
boolean isPrimary

8）Select Events----选择事件

onSelect

9）Touch Events----触摸事件

//事件名
onTouchStart
onTouchMove 
onTouchEnd 
onTouchCancel 

//属性
boolean altKey
DOMTouchList changedTouches
boolean ctrlKey
boolean getModifierState(key)
boolean metaKey
boolean shiftKey
DOMTouchList targetTouches
DOMTouchList touches

10）UI Events----UI事件

//事件名
onScroll

//属性
number detail
DOMAbstractView view

11）Wheel Events----滚轮事件

//事件名
onWheel

//属性
number deltaMode
number deltaX
number deltaY
number deltaZ

12）Media Events----媒介事件

//事件名
onAbort 
onCanPlay 
onCanPlayThrough 
onDurationChange 
onEmptied 
onEncrypted
onEnded 
onError 
onLoadedData 
onLoadedMetadata 
onLoadStart 
onPause 
onPlay
onPlaying 
onProgress 
onRateChange 
onSeeked 
onSeeking 
onStalled 
onSuspend
onTimeUpdate 
onVolumeChange 
onWaiting

13）Image Events----图片事件

onLoad 
onError

14）Animation Events------动画事件

//事件名
onAnimationStart 
onAnimationEnd 
onAnimationIteration

//属性
string animationName
string pseudoElement
float elapsedTime

15）Transition Events------过渡事件

//事件名
onTransitionEnd

//属性
string propertyName
string pseudoElement
float elapsedTime

16）Other Events------

onToggle

<五> Test Utilities---测试程序

1）test-utils
2）Jest
3）Enzyme
4）react-testing-library

1）test-utils：https://reactjs.org/docs/test-utils.html 详情

2）Jest：https://jestjs.io/ 详情

3）Enzyme： http://airbnb.io/enzyme/ 详情

4）react-testing-library：https://git.io/react-testing-library 详情

test-utils:

Simulate
renderIntoDocument()
mockComponent()
isElement()
isElementOfType()
isDOMComponent()
isCompositeComponent()
isCompositeComponentWithType()
findAllInRenderedTree()
scryRenderedDOMComponentsWithClass()
findRenderedDOMComponentWithClass()
scryRenderedDOMComponentsWithTag()
findRenderedDOMComponentWithTag()
scryRenderedComponentsWithType()
findRenderedComponentWithType()

1）shallow rendering

//组件
function MyComponent() {
  return (
    <div>
      <span className="heading">Title</span>
      <Subcomponent foo="bar" />
    </div>
  );
}

import ShallowRenderer from 'react-test-renderer/shallow';

// in your test:
const renderer = new ShallowRenderer();
renderer.render(<MyComponent />);
const result = renderer.getRenderOutput();

expect(result.type).toBe('div');
expect(result.props.children).toEqual([
  <span className="heading">Title</span>,
  <Subcomponent foo="bar" />
]);

2）Simulate

Simulate.{eventName}(
  element,
  [eventData]
)

//点击事件
// <button ref={(node) => this.button = node}>...</button>
const node = this.button;
ReactTestUtils.Simulate.click(node);

//Changing the value of an input field and then pressing ENTER
// <input ref={(node) => this.textInput = node} />
const node = this.textInput;
node.value = 'giraffe';
ReactTestUtils.Simulate.change(node);
ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13});

转载地址：http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

赏花赏景赏时光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
API reference about React

&lt;一&gt;React1、Components作用：将UI分成独立的模块，使独立的模块可以重复使用Components的定义方式：1）使用ES6子类语法，React.Component、React.PureComponent2）不使用ES6子类语法，使用模块create-react-class3）可以定义成函数React.memo A、React.compon...
复制链接

扫一扫