React

官网

用于构建用户界面（UI）的 JavaScript 库

创建 React 项目

create-react-app
官方定义的脚手架，用于快速搭建项目结构
目前 create-react-app 升级到 5.x 版本，要求 node.js 的版本至少为 14.x 以后的版本

创建项目

$ npx create-react-app
$ yarn create react-app

安装依赖包

react：核心包
react-dom：浏览器渲染（react-native：原生渲染，了解）
react-scripts：封装了 webpack 各项任务的脚本

npm scripts

可以在命令行中使用 npm run 的任务：

start：开发任务
build：生产任务，打包构建生成打包后的代码
test：测试
eject：弹出（将封装好的 webpack 任务还原到项目本地，以便于在项目目录下找到 webpack 的配置文件并进行修改扩展）
注意：执行 eject 弹出任务后，是不能撤销的

入口文件（Hello World）

src/index.js 文件（16.x、17.x的写法）：

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

ReactDOM.render(
  <h1>Hello React</h1>,
  document.getElementById('root')
)

18.x 的写法：

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>);

JSX

JavaScript 的语法扩展
建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。
在 JSX 中嵌入 JS 表达式：

<div>Hello {
    
     'world' }</div>

注：使用 { expression } 来嵌入 JS 表达式内容，注意：在 {} 内的 HTML 表达式内容会被转义处理，以避免出现 XSS 攻击。

<div dangerouslySetInnerHTML={
    
    {
    
    __html: this.state.html}}></div>

组件

函数组件

function MyComponent(props) {
    
    
  return (
    <div>JSX 表示的 React 元素</div>
  )
}

class 组件

class MyComponent extends React.Component {
    
    
  // constructor() {} // 可以省略
  render() {
    
    
    // this.props 获取组件接收到的属性
    return (
      <div>JSX 表示的 React 元素</div>
    )
  }
}

注意：

组件名称使用帕斯卡命名规范（每个单词首字母都大写，JSX 中通过标签首字母是否大写来区分是 html 标签还是自定义的组件）
使用单个根节点包裹布局结构
在 class 组件中，必须实现 render() 方法

State 与 Props

state 是组件内私有使用到的数据，state 允许 React 组件随用户操作、网络响应或者其他变化而动态更改输出内容
props 是组件接收到的属性数据，应该是只读的，绝不能修改组件中的属性数据
正确使用 state

不能直接修改 state 的值，而是调用 setState() 方法更新状态数据。直接修改 state 数据，视图不会响应式渲染
state 的更新可能是异步的
state 的更新会被合并

prop-types：运行时类型检查

下载包

$ npm i prop-types
$ yarn add prop-types

import PropTypes from 'prop-types'

class MyComponent extends React.Component {
    
    
  static propTypes = {
    
    
    prop1: PropTypes.number, // prop1式数字
    prop2: PropTypes.array.isRequired, // prop2式数组并且是必填的
  }
}

TypeScript 或 Flow：静态类型检查
属性默认值

class MyComponent extends React.Component {
    
    
  static defaultProps = {
    
    
    prop1: 1,
    prop2: 'abc',
    prop3: [],
  }
}

Ref

绑定DOM元素，能够在方法中调用到

import React, {
    
    Component} from 'react';
import Children1 from './ components/Children1'
class App extends Component {
    
    
    myRef=React.createRef()
    methods=()=>{
    
    
        console.log(this.myRef.current)
        // 指向div本身    
    }
    render() {
    
    
        return (
            <>
                <div ref={
    
    this.myRef} onClick={
    
    this.methods}>
                    hello react
                </div>
                <Children1/>
            </>
        );
    }
}

export default App;

注：调用 Ref 对象的 current 属性获取关联的数据

组件通信

父子组件

父传子：利用 props 传递
子传父：利用 props 来传递函数的引用。父组件中渲染子组件实例时，传递一个函数的引用作为属性值到子组件中，当子组件需要传递数据时，调用在属性中接收到的函数并传递参数即可。要注意函数中 this 指向的问题（可以调用 bind 修改 this 指向，或使用箭头函数定义）
父组件

import React, {
    
    Component} from 'react';
import Children1 from './ components/Children1'
class App extends Component {
    
    
    state={
    
    
        person:{
    
    
            name:'jack',
            age: '20',
        }
    }
    render() {
    
    
        return (
            <>
                <div>
                    hello react
                </div>
                <Children1 info={
    
    this.state.person}/> // 在这里通过属性的方式传值给子组件
            </>
        );
    }
}

export default App;

子组件

import React, {
    
    Component} from 'react';
import PropTypes from 'prop-types'
class Children1 extends Component {
    
    
    static propTypes={
    
    
        info:PropTypes.object.isRequired
    }
    show=()=>{
    
    
        console.log(this.props)
        // 控制台打印{info: {…}}
    }
    render() {
    
    
        return (
            <div>
                <div onClick={
    
    this.show()}>hello children</div>
                <div>{
    
    this.props.info.name}</div>
            </div>
        );
    }
}

export default Children1;

跨组件层级Context

Context 提供了一种在组件之间共享此类值的方式，不必再逐层级传播props
封装context文件utils/with-context文件中写入
利用 Context 可在全局范围内实现组件树中各组件间数据的共享，通常可以 Context 中共享的数据有如：用户登录的状态、地区偏好设置、UI主题设置、语言设置等

import {
    
    createContext} from 'react';
// 创建createContext对象
const TestContext=createContext()
// 解构要用到的组件
const {
    
    
    Provider, // 生产组件
    Consumer, // 消费组件
} = TestContext
export {
    
    
    Provider,
    Consumer,
    TestContext,
}

父级组件引入Provider

import React, {
    
    Component} from 'react';
import Children1 from './ components/Children1'
import {
    
    Provider} from "./utils/with-context";

class App extends Component {
    
    
    state={
    
    
        person:{
    
    
            name:'jack',
            age: '20',
        }
    }
    myRef=React.createRef()
    methods=()=>{
    
    
        console.log(this.myRef.current)
    }
    render() {
    
    
        return (
            <Provider value={
    
    {
    
    
                person:this.state.person
            }}>
                <>
                    <div ref={
    
    this.myRef} onClick={
    
    this.methods}>
                        hello react
                    </div>
                    <Children1/>
                </>
            </Provider>
        );
    }
}

export default App;

子级组件引入Consumer

import React, {
    
    Component} from 'react';
import {
    
    Consumer} from "../utils/with-context";

class Children1 extends Component {
    
    

    render() {
    
    
        return (
            <Consumer>
                {
    
    
                    value=>{
    
    
                        const {
    
    person} = value
                        return (
                            <div>
                                <div>hello children</div>
                                <div>{
    
    person.name}</div>
                            </div>
                        );
                    }
                }
            </Consumer>
        )
    }

}

export default Children1;

context API

React.createContext(defaultValue)会从最近的Prvider中读取当前的context值，如果没有匹配到，将调用默认defaultValue
Provider每个 Context 对象都会返回一个 Provider React 组件，它允许消费组件订阅 context 的变化
Consumer传递给该函数的 value 值等价于组件树上方离这个 context 最近的 Provider 提供的 value 值
class.contextType 这是类的静态属性，设置后，可以成员方法中使用 this.context 获取到最近保存在 Provider 组件 value 属性中的值
Context.displayName使用该字符串来确定 context 要显示的内容

import React, {
    
    Component} from 'react';
import {
    
    Consumer, TestContext} from "../utils/with-context";
class Children1 extends Component {
    
    
    handelContext=()=>{
    
    
        console.log(this.context) //{person: {…}}
    }
    render() {
    
    
        TestContext.displayName='rose'
        return (
            <Consumer>
                {
    
    
                    value=>{
    
    
                        const {
    
    person} = value
                        return (
                            <div>
                                <div onClick={
    
    this.handelContext}>hello children</div>
                                <div>{
    
    person.name}</div> // jack
                                <div>{
    
    TestContext.displayName}</div> // rose
                            </div>
                        );
                    }
                }
            </Consumer>
        )
    }

}
Children1.contextType=TestContext // 定义类的静态属性，这样类中就能访问context

export default Children1;

生命周期

组件从创建开始，到销毁结束，所经历的整个过程，就是生命周期
生命周期钩子：在正常的生命周期过程中，有机会执行到用户额外的代码逻辑
只在 class 组件中有生命周期钩子函数，函数组件中不存在这些生命周期钩子（函数组件中 this 为 undefined）

主要阶段

挂载阶段
当组件实例被创建并插入 DOM 中时

constructor() 构造器，初始化，如：state初始化，方法中 this 指向的绑定
static getDerivedStateFromProps()：生命周期的功能是将传入的props映射到state上面
render() 渲染
componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据，此处是实例化请求的好地方

更新阶段
当组件的 props 或 state 发生变化时会触发更新

static getDerivedStateFromProps()：
shouldComponentUpdate()：通常作为性能优化的方式存在。这个方法会返回 boolean 值，当返回 true 时，会继续向后执行流程，返回 false 时，中断当前阶段渲染。默认行为是 state 每次发生变化组件都会重新渲染
render()：
componentDidUpdate() 会在更新后会被立即调用

卸载阶段（销毁）

componentWillUnmount() 销毁阶段常销毁的资源：打开的连接、启动的定时器、未完成的网络请求、订阅的监听等

react1-基本介绍

React

官网

用于构建用户界面（UI）的 JavaScript 库

创建 React 项目

创建项目

安装依赖包

npm scripts

入口文件（Hello World）

JSX

组件

State 与 Props

prop-types：运行时类型检查

Ref

组件通信

context API

生命周期

主要阶段

猜你喜欢