React组件化开发

1.组件的定义方式

• 函数组件Functional Component
• 类组件Class Component

2.类组件

export class Profile extends Component {render() {console.log(this.context);return (<div>Profile</div>)}
}

• 组件的名称是大写字符开头（无论类组件还是函数组件）
• 类组件需要继承自 React.Component
• 类组件必须实现render函数
• constructor是可选的，我们通常在constructor中初始化一些数据

render函数的返回值

当 render 被调用时，它会检查 this.props 和 this.state 的变化并返回以下类型之一:

• React 元素：通常通过 JSX 创建
• 数组或 fragments：使得 render 方法可以返回多个元素
• Portals：可以渲染子节点到不同的 DOM 子树中
• 字符串或数值类型：它们在 DOM 中会被渲染为文本节点
• 布尔类型或 null：什么都不渲染

3.函数组件

函数组件是使用function来进行定义的函数，只是这个函数会返回和类组件中render函数返回一样的内容。

函数组件有自己的特点:

• 没有生命周期，也会被更新并挂载，但是没有生命周期函数
• this关键字不能指向组件实例（因为没有组件实例）
• 没有内部状态（state）

4.生命周期

React内部为了告诉我们当前处于哪些阶段，会对我们组件内部实现的某些函数进行回调，这些函数就是生命周期函数：

• 实现componentDidMount函数：组件已经挂载到DOM上时，就会回调
• 实现componentDidUpdate函数：组件已经发生了更新时，就会回调
• 实现componentWillUnmount函数：组件即将被移除时，就会回调

不常用的生命周期

• getDerivedStateFromProps：state 的值在任何时候都依赖于 props时使用；该方法返回一个对象来更新state
• getSnapshotBeforeUpdate：在React更新DOM之前回调的一个函数，可以获取DOM更新前的一些信息（比如说滚动位置）
• shouldComponentUpdate：可进行state、props、context进行新旧对比，返回true或false进行是否更新组件

5.组件之间的通信

• 父组件通过 属性=值 的形式来传递给子组件数据
• 子组件通过 props 参数获取父组件传递过来的数据

父组件：

import React from "react"
// import HelloWorld from "./Components/HelloWorld"
import TabControl from './Components/父子组件通信案例'
// import NavBar from './Components/实现插槽一'
// import NavBar from './Components/实现插槽二'
// import TabControl from './Components/作用域插槽'
// import AppHome from "./Components/非父子组件通信-context/AppHome";class App extends React.Component {constructor() {super()console.log("hello react");this.state = {message: "hello react",isShow: true,titles: ['流行', '新款', '精选'],curIndex: 0}}changeText() {this.setState({message: 'hello  hgf'})}switchText() {this.setState({isShow: !this.state.isShow})}switchTab(curIndex){this.setState({curIndex})}render() {const { titles, curIndex } = this.statereturn (<div><TabControl titles={titles} changeTab={(curIndex) => this.switchTab(curIndex)} />{/* <h2>{titles[curIndex]}</h2> */}{/* <h2>{message}</h2> */}{/* <button onClick={e => this.switchText()}>切换</button> */}{/* {isShow && <HelloWorld/>} */}{/* <button onClick={e => this.changeText()}>修改文本</button> */}{/* 插槽实现1 */}{/* <NavBar><button>左边</button><h2>中间部分</h2><button>右边</button></NavBar> */}{/* 插槽实现二 */}{/* <NavBar leftSlot={<button>左按钮</button>} centerSlot={<h2>插槽实现二</h2>} rightSlot={<button>右按钮</button>} /> */}{/* 作用域插槽 */}{/* <TabControl titles={titles} itemTypes={(item) => <button>{item}</button>} changeTab={(curIndex) => this.switchTab(curIndex)} /><h2>{titles[curIndex]}</h2> */}{/* 非父子组件通信 */}{/* <AppHome /> */}</div>)}componentDidMount() {console.log("component Mount")}componentDidUpdate() {console.log("component Update");}
}export default App

子组件：

import React, { Component } from 'react'
import "./tab-control.css"export class index extends Component {constructor() {super()this.state = {curIndex: 0}}changeCurIndex(index) {this.setState({curIndex: index})this.props.changeTab(index)}render() {const {titles} = this.propsconst {curIndex} = this.statereturn (<div><div className='tab-control'>{titles.map((item, index) => {return (<div className={`item ${index === curIndex ? 'active':''}`} key={item} onClick={e => this.changeCurIndex(index)}><span className='text'>{item}</span></div>)})}</div></div>)}
}export default index

6.React中实现插槽

React对于这种需要插槽的情况非常灵活，有两种方案可以实现：

• 组件的children子元素
• props属性传递React元素

方式一：

import React, { Component } from 'react'
import "./style.css"export class index extends Component {render() {const {children} = this.propsreturn (<div className='nav-bar'><div className='left'>{children[0]}</div><div className='center'>{children[1]}</div><div className='right'>{children[2]}</div></div>)}
}// index.propTypes = {
//   children: PropTypes.element
// }export default index

方式二：

import React, { Component } from 'react'
import "./style.css"export class index extends Component {render() {const {leftSlot, centerSlot, rightSlot} = this.propsreturn (<div className='nav-bar'><div className='left'>{leftSlot}</div><div className='center'>{centerSlot}</div><div className='right'>{rightSlot}</div></div>)}
}// index.propTypes = {
//   children: PropTypes.element
// }export default index

7.context应用场景

非父子组件数据的共享：

对于有一些场景：比如一些数据需要在多个组件中进行共享（地区偏好、UI主题、用户登录状态、用户信息等）

• React提供了一个API：Context
• Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props
• Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据，例如当前认证的用户、主题或首选语言

Context相关API：

React.createContext

• 创建一个需要共享的Context对象

• 如果一个组件订阅了Context，那么这个组件会从离自身最近的那个匹配的 Provider 中读取到当前的context值
• defaultValue是组件在顶层查找过程中没有找到对应的Provider，那么就使用默认值

Context.Provider

• 每个 Context 对象都会返回一个 Provider React 组件，它允许消费组件订阅 context 的变化
• Provider 接收一个 value 属性，传递给消费组件
• 一个 Provider 可以和多个消费组件有对应关系
• 多个 Provider 也可以嵌套使用，里层的会覆盖外层的数据
• 当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染

创建context

import React from "react";const ThemeContext = React.createContext({nickname: 'curry', work: '前端'})export default ThemeContext

import React from "react";const UserContext = React.createContext()export default UserContext

 提供值

import React, { Component } from 'react'
import ThemeContext from './context/theme-context'
import UserContext from './context/user-context'
import Home from './context/Home'
import Profile from './context/Profile'export class AppHome extends Component {render() {return (<div>App<UserContext.Provider value={{name: 'hgf', age: 23}}><ThemeContext.Provider value={{color: 'red', size: '30px'}}><Home /></ThemeContext.Provider></UserContext.Provider><Profile /></div>)}
}export default AppHome

获取和使用方式 

import React, { Component } from 'react'
import ThemeContext from './theme-context'export class Profile extends Component {render() {console.log(this.context);return (<div>Profile</div>)}
}Profile.contextType = ThemeContextexport default Profile

import React, { Component } from 'react'
import ThemeContext from './theme-context';
import UserContext from './user-context';export class HomeInfo extends Component {render() {console.log(this.context);return (<div>HomeInfo<UserContext.Consumer>{value => {return <h2>InfoUser: {value.age}</h2>}}</UserContext.Consumer></div>)}
}HomeInfo.contextType = ThemeContextexport default HomeInfo