tangxiujiang
tangxiujiang

API reference about React

<一>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 
Hello, {this.props.name}
;
  }
}

  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  ; // props.color will be set to blue
}
//不能设置为null，这样在浏览器就不会显示
render() {
  return  ; // 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

//设置组件是否被选中


属性defaultChecked 设置组件第一次挂载的时候是否被选中

className

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

dangerouslySetInnerHTML---替代innerHTML

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

function MyComponent() {
  return 
;
}

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

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

selected---------用于

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

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

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

function HelloWorldComponent() {
  return 
Hello World!
;
}

suppressContentEditableWarning-------

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

value-----------------、