React React组件的创建和基本使用

React组件

React组件有两种创建方式，分别是使用函数创建和使用类创建。

此二者一般称为函数组件和类组件。

当组件较多时可以把单独的每个组件抽离到单独的js文件中，方便调用和维护。

1 使用函数创建组件

1. 函数名必须大写字母开头，作为渲染组件时的组件名

   • React根据开头字母是否大写来区分组件和普通的react元素

2. 函数组件必须有返回值，表示该组件的结构。

3. 若无返回值，则表示不渲染任何内容。

   import React from 'react';
   import ReactDOM from 'react-dom';
   
   function SayHello() {
     return (
       <div>第一个函数组件</div>
     )
   }
   //渲染组件
   ReactDOM.render(<SayHello />, document.getElementById('root'))
   

2 使用类创建组件

使用ES6的class类创建组件

1. 类名必须大写字母开头。

2. 类组件必须继承React.Component父类，以使用继承来的属性和方法。

3. 组件必须提供有返回值的render()方法，表示该组件的结构。

   import React from 'react';
   import ReactDOM from 'react-dom';
   
   class Person extends React.Component {
     render() {
       return (
         <div>第一个类组件</div>
       )
     }
   }
   //渲染组件	
   ReactDOM.render(<Person />, document.getElementById('root'))
   

3 抽离组件到单独的js文件

独立的组件放到一个独立的js文件，然后暴露出去再渲染

//1、Person.js
import React from 'react';

class Person extends React.Component {
  render() {
    return (
      <div>第一个类组件</div>
    )
  }
}
//暴露出组件
export default Person

//2、index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Person from './js/Person'
//渲染类组件
ReactDOM.render(<Person />, document.getElementById('root'))

4 有状态组件与无状态组件

• 函数组件又叫无状态组件。
• 类组件又叫有状态组件。

状态（state）即数据。

函数组件没有自己的状态，只负责数据的静态展示

类组件有自己的状态，负责动态更新UI。

5 组件中的state与setState

• 状态（state）即数据。
• state是组件内部的私有数据，只能在组件内部使用。
• state的值为对象。

import React from 'react';
import ReactDOM from 'react-dom';

class Person extends React.Component {
    /*constructor(){
    	super()
    	state = {
			count:0
		}
    }*/
    //简化语法初始化state
    state = {
        count: 0
    }
    addNum = () => {
        this.setState({
            count: this.state.count + 1
        })
    }
    render() {
        return (
            <div>
            	<span>数据：{this.state.count}</span>
    			<button onClick={this.addNum}>+1</button>
    		</div>
    	)
    }
}
//渲染组件	
ReactDOM.render(<Person />, document.getElementById('root'))

5.1 state的基本使用

• 获取状态：this.state.count

5.2 setState()修改状态

• 不能直接修改state里面的值，修改状态要使用setState()方法
• 思想：数据驱动视图

• 修改状态：this.setState({count:this.state.count+1})
• setState作用：1、修改state；2、更新UI。

6 高阶组件

6.1 概念

render props模式和高阶组件都可以实现组件状态逻辑复用。

• 高阶组件(HOC，Height-Order-Comonent)就是一个函数，接收要包装的组件，返回增强后的组件。
• 高阶组件内部创建一个类组件，在类组件中提供复用的状态逻辑代码，通过prop将复用的状态传递给被包装组件WrappedComponent

const EnhancedComponent = withHOC(WrappedComponent)

6.2 使用

使用步骤：

1. 创建一个函数，名称约定以with开头。
2. 指定函数参数，参数应该以大写字母开头，作为要渲染的组件。
3. 在函数内部创建一个类组件，提供并返回复用的状态逻辑代码。
4. 在类组件中渲染参数组件，同时将状态通过prop传递给参数组件。
5. 调用该高阶组件，传入要增强的组件，通过返回值拿到增强后的组件，并将其渲染到页面上。

function withMouse(WrappedComponent){
	class Mouse extends React.Component{
        render(){
            return <WrappedComponent {...this.state}/>
        }
    }
    return Mouse
}

//获取增强后的组件
const MousePosition = withMouse(Position)
//渲染组件
<MousePosition/>

• 设置displayName

  • 作用：便于调试时区分不同的组件，设置调试信息。

  Mouse.displayName = `WithMouse${getDisplayName(WrappedComponent)}`
  

• 传递props

  • 问题：props丢失
  • 原因：高阶组件没有传递props
  • 解决方法：渲染WrappedComponent时，将state和thi.props一起传递给组件

  <WrappedComponent {...this.state} {...this.props}/>