API reference about React

落日映苍穹つ 2022-04-10 04:42 105阅读 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 · 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][https_reactjs.org_docs_test-utils.html]    [详情][https_reactjs.org_docs_test-utils.html]

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

3）Enzyme： [http://airbnb.io/enzyme/][http_airbnb.io_enzyme]    [详情][http_airbnb.io_enzyme]

4）react-testing-library：[https://git.io/react-testing-library][https_git.io_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/][http_projects.wojtekmaj.pl_react-lifecycle-methods-diagram]

[https_reactjs.org_docs_test-utils.html]: https://reactjs.org/docs/test-utils.html
[https_jestjs.io]: https://jestjs.io/
[http_airbnb.io_enzyme]: http://airbnb.io/enzyme/
[https_git.io_react-testing-library]: https://git.io/react-testing-library
[http_projects.wojtekmaj.pl_react-lifecycle-methods-diagram]: http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/