React组件

React组件

函数式组件

通过定义function来创建函数式组件

  function MyComponet() {
    console.log(this); // 此处的this是undefined babel翻译后开启了严格模式
    return <h2>函数式组件</h2>
  }
  // 渲染组件到页面
  ReactDOM.render(<MyComponet/>,document.querySelector('.main-container'))

类式组件

通过定义class来创建类式组件

  class MyComponet extends React.Component{
    render(){ 
      console.log(this); // 此处的this为MyComponet的实例对象 因为render在MyComponet的原型对象上
      return <h2>类定义的组件</h2>
    }
  }
  // 渲染组件到页面
  ReactDOM.render(<MyComponet/>,document.querySelector('.main-container'))

根标签

可以使用<React.Fragment></React.Fragment>进行包裹

React.Fragment组件能在不创建额外的DOM元素下 让render()返回多个元素

React.Fragment允许将子列表分组 无需添加额外的节点

可以简写成<></> 但简写不能接受键值或属性， React.Fragment可以

组件的组合、嵌套

将一个组件渲染到某一个节点里的时候，会将这个节点里原有内容覆盖

组件嵌套的方式就是将子组件写入到父组件的模板中去，且react没有Vue中的内容分发机制（slot）

所以在一个组件的模板中只能看到父子关系

// 从 react 的包当中引入了 React 和 React.js 的组件父类 Component
// 还引入了一个React.js里的一种特殊的组件 Fragment
import React, { Component, Fragment } from 'react'
import ReactDOM from 'react-dom'

class Title extends Component {
  render () {
    return (
      <h1>欢迎进入React的世界</h1>
  	)
  }
}
class Content extends Component {
  render () {
    return (
      <p>React.js是一个构建UI的库</p>
  	)
  }
}
/** 由于每个React组件只能有一个根节点，所以要渲染多个组件的时候，需要在最外层包一个容器，如果使用div, 会生成多余的一层dom
class App extends Component {
  render () {
    return (
    	<div>
    		<Title />
        <Content />
      </div>
  	)
  }
}
**/
// 如果不想生成多余的一层dom可以使用React提供的Fragment组件在最外层进行包裹
class App extends Component {
  render () {
    return (
      <Fragment>
      	<Title />
        <Content />
      </Fragment>
  	)
  }
}
ReactDOM.render(
  <App/>,
  document.getElementById('root')
)

组件的数据挂载方式

1、属性(props)

props是正常是外部传入的，组件内部也可以通过一些方式来初始化的设置，属性不能被组件自己更改，但是你可以通过父组件主动重新渲染的方式来传入新的 props

属性是描述性质、特点的，组件自己不能随意更改。

之前的组件代码里面有props的简单使用，总的来说，在使用一个组件的时候，可以把参数放在标签的属性当中，所有的属性都会作为组件 props 对象的键值。通过箭头函数创建的组件，需要通过函数的参数来接收props:

import React, { Component, Fragment } from 'react'
import ReactDOM from 'react-dom'

class Title extends Component {
  render () {
    return (
  		<h1>欢迎进入{this.props.name}的世界</h1>
  	)
  }
}

const Content = (props) => {
  return (
    <p>{props.name}是一个构建UI的库</p>
  )
}

class App extends Component {
  render () {
    return (
  		<Fragment>
      	<Title name="React" />
        <Content name="React.js" />
      </Fragment>
  	)
  }
}

ReactDOM.render(
	<App/>,
  document.getElementById('root')
)

(1) 设置组件的默认props

import React, { Component, Fragment } from 'react'
import ReactDOM from 'react-dom'

class Title extends Component {
  // 使用类创建的组件，直接在这里写static方法，创建defaultProps
  static defaultProps = {
    name: 'React'
  }
  render () {
    return (
  		<h1>欢迎进入{this.props.name}的世界</h1>
  	)
  }
}

const Content = (props) => {
  return (
    <p>{props.name}是一个构建UI的库</p>
  )
}

// 使用箭头函数创建的组件，需要在这个组件上直接写defaultProps属性
Content.defaultProps = {
  name: 'React.js'
}

class App extends Component {
  render () {
    return (
  		<Fragment>
        {/* 由于设置了defaultProps， 不传props也能正常运行，如果传递了就会覆盖defaultProps的值 */}
      	<Title />
        <Content />
      </Fragment>
  	)
  }
}

ReactDOM.render(
	<App/>,
  document.getElementById('root')
)

(2) props.children

使用组件的时候，可以嵌套。要在自定义组件的使用嵌套结构，就需要使用 props.children

import React, { Component, Fragment } from 'react'
import ReactDOM from 'react-dom'

class Title extends Component {
  render () {
    return (
  		<h1>欢迎进入{this.props.children}的世界</h1>
  	)
  }
}

const Content = (props) => {
  return (
    <p>{props.children}</p>
  )
}

class App extends Component {
  render () {
    return (
  		<Fragment>
      	<Title>React</Title>
        <Content><i>React.js</i>是一个构建UI的库</Content>
      </Fragment>
  	)
  }
}

ReactDOM.render(
	<App/>,
  document.getElementById('root')
)

当有多个props.children时接收到的为一个数组，通过索引获取

<div>
	{this.props.children[2]}
	{this.props.children[1]}
	{this.props.children[0]}
</div>

(3) 使用prop-types检查props

React其实是为了构建大型应用程序而生, 在一个大型应用中，根本不知道别人使用你写的组件的时候会传入什么样的参数，有可能会造成应用程序运行不了，但是不报错。为了解决这个问题，React提供了一种机制，让写组件的人可以给组件的props设定参数检查，需要安装和使用prop-types:

import types from 'prop-types' // 引入props验证模块 react自带不需下载

import React, { Component } from 'react'

export default class Navbar extends Component {
  render() {
    return (
      <div>doc</div>
    )
  }
}

// 添加类属性验证
Navbar.propTypes = {
	title:types.string,
	flag:types.bool // string bool 为prop-types 自带方法
}

// 由于是在类的属性上添加propTypes 因此可以直接在类上定义静态属性 无需分开定义
import React, { Component } from 'react'

export default class Navbar extends Component {

  static propTypes = {
  	title:types.string,
	flag:types.bool
  }
  
  render() {
    return (
      <div>code</div>
    )
  }
}

(4) 使用props默认值

import React, { Component } from 'react'

export default class Navbar extends Component {

  static defaultProps = {
	flag:true
  }
  
  render() {
    return (
      <div>code</div>
    )
  }
}

函数组件中因为没有静态属性所以必须要用Navbar.propTypes={ }的写法

2、状态(state)

state是组件对象中最重要的属性 值是对象 可以包含多个key-value的组合

组件被称为"状态机"，通过更新组件的state来更新对应的页面显示（重新渲染组件）

组件中的render中的this为组件实例对象

组件自定义方法中this为undefined 可以通过bind强制绑定this或箭头函数解决

状态数据不能直接修改或更新

在vue中data时利用object.defineProperty处理过的更改data的数据会触发数据的getter和setter

但是React中没有做过这样的处理 所以需要更改状态的方法setState()

状态就是组件描述某种显示情况的数据，由组件自己设置和更改，也就是说由组件自己维护

使用状态的目的就是为了在不同的状态下使组件的显示不同(自己管理)

(1) 定义state

类式组件要初始化属性时 需要构造器（不推荐）

import React from 'react' 

export default class Weather extends React.Component{
  constructor(props){ 	// 当需要使用state初始化属性时必须使用构造器 传入props
    super(props)		// 根据类的规范 在this之前必须调用super()
    this.state = {isHot:false,wind:'微风'} // 初始化state属性并赋值
    this.changeWeather = this.changeWeather.bind(this)	
    // 将实例的原型上的方法通过bind绑定this到实例对象上并挂载到实例上
  }
  render(){
    const {isHot,wind} = this.state // 从state上解构出需要的属性
    return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热':'凉爽'},{wind}</h1>
   // 此时click调用changeWeather 因为实例上有changeWeather方法 所以不会通过原型链调用原型上的方法
   // 如果调用原型上的changeWeather this指向window 严格模式下undefined
  }
  changeWeather(){
  // bind绑定this到实例对象后 可以this获取到实例上的state 然后通过setState更改state的值
    const isHot = this.state.isHot
    this.setState({isHot:!isHot})
  }
}

因为本质上只需用到state不需要构造器 可以简写成

import React from 'react'

export default class Weather extends React.Component {
	// 当class的构造器外变量直接赋值时 属性直接挂载在实例对象中
	// 初始化state属性
  state = { isHot: false, wind: '微风' }
  render () {
    const { isHot, wind } = this.state
    return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'},{wind}</h1>
  }
  // 此时changeWeather为直接赋值 所以方法在实例对象中 
  // 然后通过箭头函数得到上下文中的this 即实例的this
  changeWeather = () => {
    const isHot = this.state.isHot
    this.setState({ isHot: !isHot })
  }
}

this.props和this.state是纯js对象,在vue中，data属性是利用Object.defineProperty处理过的，更改​data的数据的时候会触发数据的getter和setter，但是React中没有做这样的处理，如果直接更改的话，react是无法得知的，所以，需要使用特殊的更改状态的方法setState。

(2) setState

isLiked 存放在实例的 state 对象当中，组件的 render 函数内，会根据组件的 state 的中的isLiked不同显示“取消”或“收藏”内容。下面给 button 加上了点击的事件监听。

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class App extends Component {
  constructor() {
    super()
    this.state = {
      name: 'React',
      isLiked: false
    }
  }
  handleBtnClick = () => {
    this.setState({
      isLiked: !this.state.isLiked
    })
  }
  render () {
    return (
      <div>
        <h1>欢迎来到{this.state.name}的世界</h1>
        <button onClick={this.handleBtnClick}>
          {
            this.state.isLiked ? '❤️取消' : '🖤收藏'
          }
        </button>
      </div>
  	)
  }
}
ReactDOM.render(
	<App/>,
  document.getElementById('root')
)

setState有两个参数

第一个参数可以是对象，也可以是方法return一个对象，我们把这个参数叫做updater

参数是对象

this.setState({
  isLiked: !this.state.isLiked
})

参数是方法

this.setState((prevState, props) => {
  return {
    isLiked: !prevState.isLiked
  }
})

注意的是这个方法接收两个参数，第一个是上一次的state, 第二个是props

state的同步与异步

在同步代码中setState是异步的，异步更新状态，异步更新真实dom

所以想要获取到最新的state，没有办法获取，就有了第二个参数，这是一个可选的回调函数，状态和dom更新完后就会被触发

this.setState((prevState, props) => {
  return {
    isLiked: !prevState.isLiked
  }
}, () => {
  console.log('回调里的',this.state.isLiked)
})
console.log('setState外部的',this.state.isLiked)

在异步代码中setState是同步的，同步更新状态，同步更新真实dom

3、属性vs状态

相似点：都是纯js对象，都会触发render更新，都具有确定性（状态/属性相同，结果相同）

不同点：

1. 属性能从父组件获取，状态不能
2. 属性可以由父组件修改，状态不能
3. 属性能在内部设置默认值，状态也可以
4. 属性不在组件内部修改，状态要改
5. 属性能设置子组件初始值，状态不可以
6. 属性可以修改子组件的值，状态不可以

state 的主要作用是用于组件保存、控制、修改自己的可变状态。state 在组件内部初始化，可以被组件自身修改，而外部不能访问也不能修改。你可以认为 state 是一个局部的、只能被组件自身控制的数据源。state 中状态可以通过 this.setState方法进行更新，setState 会导致组件的重新渲染。

props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配置参数，组件内部无法控制也无法修改。除非外部组件主动传入新的 props，否则组件的 props 永远保持不变。

如果搞不清 state 和 props 的使用场景，记住一个简单的规则：尽量少地用 state，多用 props。

没有 state 的组件叫无状态组件（stateless component），设置了 state 的叫做有状态组件（stateful component）。因为状态会带来管理的复杂性，我们尽量多地写无状态组件，尽量少地写有状态的组件。这样会降低代码维护的难度，也会在一定程度上增强组件的可复用性。

4、状态提升

如果有多个组件共享一个数据，把这个数据放到共同的父级组件中来管理

5、受控组件与非受控组件

React组件的数据渲染是否被调用者传递的props完全控制，控制则为受控组件，否则非受控组件。

6、渲染数据

条件渲染

 {
   condition ? '❤️取消' : '🖤收藏'
 }

列表渲染

// 数据
const people = [{
  id: 1,
  name: 'Leo',
  age: 35
}, {
  id: 2,
  name: 'XiaoMing',
  age: 16
}]
// 渲染列表
{
  people.map(person => {
    return (
      <dl key={person.id}>
        <dt>{person.name}</dt>
        <dd>age: {person.age}</dd>
      </dl>
    )
  })
}

React的高效依赖于所谓的 Virtual-DOM，尽量不碰 DOM。对于列表元素来说会有一个问题：元素可能会在一个列表中改变位置。要实现这个操作，只需要交换一下 DOM 位置就行了，但是React并不知道其实我们只是改变了元素的位置，所以它会重新渲染后面两个元素（再执行 Virtual-DOM ），这样会大大增加 DOM 操作。但如果给每个元素加上唯一的标识，React 就可以知道这两个元素只是交换了位置，这个标识就是key，这个 key 必须是每个元素唯一的标识

• dangerouslySetInnerHTML

对于富文本创建的内容，后台拿到的数据是这样的：

content = "<p>React.js是一个构建UI的库</p>"

处于安全的原因，React当中所有表达式的内容会被转义，如果直接输入，标签会被当成文本。这时候就需要使用dangerouslySetHTML属性，它允许我们动态设置innerHTML

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class App extends Component {
  constructor() {
    super()
    this.state = {
      content : "<p>React.js是一个构建UI的库</p>"
    }
  }
  render () {
    return (
  		<div
        // 注意这里是两个下下划线 __html
        dangerouslySetInnerHTML={{__html: this.state.content}}
      />
  	)
  }
}
ReactDOM.render(
	<App/>,
  document.getElementById('root')
)

7、PureComponent

PureComponnet里如果接收到的新属性或者是更改后的状态和原属性、原状态相同的话，就不会去重新render了

在里面也可以使用shouldComponentUpdate，而且。是否重新渲染以shouldComponentUpdate的返回值为最终的决定因素。

决定shouldComponentUpdate 返回true或者false 从而决定要不要呼叫render function

如果state或props一直都在变化，那PureComponent并不会比较快，因为shallowEqual也需要花时间

import React, { PureComponent } from 'react'

class YourComponent extends PureComponent {
  ……
}

8、Function Component

在类组件中通过PureComponent可以减少组件的重新加载

在函数组件中要通过memo高阶组件

组件仅在它的props发生变化的时候进行重新渲染，通常来说，在组件中React组件，只要有变化就会走一遍渲染流程

React.memo()，我们可以仅仅让某些组件进行渲染

PureComponent只能用于class组件，memo用于functional组件

const Child = memo(()=>{
	return <div>child</div>
})