react 的高级用法

最新推荐文章于 2024-05-23 10:38:17 发布
最新推荐文章于 2024-05-23 10:38:17 发布
阅读量694 收藏 1
点赞数
分类专栏： react
原文链接：http://www.zhufengpeixun.cn/ahead/html/62.3.react-high.html#t41.2%20%E7%B1%BB%E7%BB%84%E4%BB%B6
版权

>>>

context,hoc,render,createPortal,

>>>

1.Context(上下文)

  • 在某些场景下，你想在整个组件树中传递数据，但却不想手动地在每一层传递属性。你可以直接在 React 中使用强大的contextAPI解决上述问题
  • 在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但这种做法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI 主题），这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props

contextapi

1.1 函数组件

1.1.1 使用

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
let ThemeContext = React.createContext('theme');

class Header extends Component {
    render() {
        return (
             <ThemeContext.Consumer>
                {
                    value => (
                        <div style={{ border: `5px solid ${value.color}`, padding: 5 }}>
                          header
                          <Title />
                        </div>
                    )
                }
            </ThemeContext.Consumer>
        )
    }
}
class Title extends Component {
    static contextType = ThemeContext;
    render() {
        return (
            <ThemeContext.Consumer>
                {
                    value => (
                       <div style={{border: `5px solid ${value.color}` }}>
                            title
                        </div>
                    )
                }
            </ThemeContext.Consumer>
        )
    }
}
class Main extends Component {
    static contextType = ThemeContext;
    render() {
        return (
            <ThemeContext.Consumer>
                {
                    value => (
                      <div style={{ border: `5px solid ${value.color}`, margin: 5, padding: 5 }}>
                        main
                        <Content />
                      </div>
                    )
                }
            </ThemeContext.Consumer>
        )
    }
}
class Content extends Component {
    static contextType = ThemeContext;
    render() {
        return (
            <ThemeContext.Consumer>
                {
                    value => (
                     <div style={{border: `5px solid ${value.color}`, padding: 5 }}>
                        Content
                            <button onClick={() =>value.changeColor('red')} style={{color:'red'}}>红色</button>
                        <button onClick={() => value.changeColor('green')} style={{color:'green'}}>绿色</button>
                     </div>
                    )
                }
            </ThemeContext.Consumer>

        )
    }
}
class Page extends Component {
    constructor() {
        super();
        this.state = { color: 'red' };
    }
    changeColor = (color) => {
        this.setState({ color })
    }
    render() {
        let contextVal = {changeColor: this.changeColor,color:this.state.color };
        return (
            <ThemeContext.Provider value={contextVal}>
                <div style={{margin:'10px', border: `5px solid ${this.state.color}`, padding: 5, width: 200 }}>
                    page
                    <Header />
                    <Main />
                </div>
            </ThemeContext.Provider>

        )
    }
}
ReactDOM.render(<Page />, document.querySelector('#root'));

1.1.2 函数实现

function createContext(){
    class Provider extends React.Component{
        static value;
        constructor(props){
            super(props);
            Provider.value= props.value
            this.state = {value:props.value};
        }
        static getDerivedStateFromProps(nextProps, prevState) {
            Provider.value = nextProps.value
            return {value:nextProps.value};
        }
        render(){
            return this.props.children;
        }
    }
    class Consumer extends React.Component{
        constructor(props){
            super(props);
        }
        render(){
            return this.props.children(Provider.value);
        }
    }
    return {
        Provider,
        Consumer
    }
}
let ThemeContext = createContext('theme');

1.2 类组件

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
function createContext(){
    class Provider extends React.Component{
        static value;
        constructor(props){
            super(props);
            Provider.value= props.value
            this.state = {value:props.value};
        }
        static getDerivedStateFromProps(nextProps, prevState) {
            Provider.value = nextProps.value
            return {value:nextProps.value};
        }
        render(){
            return this.props.children;
        }
    }
    class Consumer extends React.Component{
        constructor(props){
            super(props);
        }
        render(){
            return this.props.children(Provider.value);
        }
    }
    return {
        Provider,
        Consumer
    }
}
let ThemeContext = createContext('theme');

class Header extends Component {
    static contextType = ThemeContext;
    render() {
        this.context2 = Header.contextType.Provider.value;
        return (
             <div style={{ border: `5px solid ${this.context2.color}`, padding: 5 }}>
                          header
                          <Title />
             </div>
        )
    }
}
class Title extends Component {
    static contextType = ThemeContext;
    render() {
        this.context2 = Title.contextType.Provider.value;
        return (
           <div style={{border: `5px solid ${this.context2.color}` }}>
                            title
            </div>
        )
    }
}
class Main extends Component {
    static contextType = ThemeContext;
    render() {
        this.context2 = Main.contextType.Provider.value;
        return (
             <div style={{ border: `5px solid ${this.context2.color}`, margin: 5, padding: 5 }}>
                        main
                        <Content />
             </div>
        )
    }
}
class Content extends Component {
    static contextType = ThemeContext;
    render() {
        this.context2 = Content.contextType.Provider.value;
        return (
            <div style={{border: `5px solid ${this.context2.color}`, padding: 5 }}>
                        Content
                            <button onClick={() =>this.context2.changeColor('red')} style={{color:'red'}}>红色</button>
                        <button onClick={() => this.context2.changeColor('green')} style={{color:'green'}}>绿色</button>
            </div>
        )
    }
}
class Page extends Component {
    constructor() {
        super();
        this.state = { color: 'red' };
    }
    changeColor = (color) => {
        this.setState({ color })
    }
    render() {
        let contextVal = {changeColor: this.changeColor,color:this.state.color };
        return (
            <ThemeContext.Provider value={contextVal}>
                <div style={{margin:'10px', border: `5px solid ${this.state.color}`, padding: 5, width: 200 }}>
                    page
                    <Header />
                    <Main />
                </div>
            </ThemeContext.Provider>

        )
    }
}
ReactDOM.render(<Page />, document.querySelector('#root'));

3. 高阶组件

  • 高阶组件就是一个函数，传给它一个组件，它返回一个新的组件
  • 高阶组件的作用其实就是为了组件之间的代码复用
const NewComponent = higherOrderComponent(OldComponent)

3.1 日志组件

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
const logger = (WrappedComponent) => {
    class LoggerComponent extends Component {
      componentWillMount(){
          this.start = Date.now();
      }  
      componentDidMount(){
          console.log((Date.now() - this.start)+'ms')
      }
      render () {
        return <WrappedComponent />
      }
    }
    return LoggerComponent;
  }
let Hello = logger(props=><h1>hello</h1>);

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

3.2 多层高阶组件

3.2.1 从localStorage中加载

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
const fromLocal = (WrappedComponent,name) =>{
    class NewComponent extends Component{
        constructor(){
            super();
            this.state = {value:null};
        }
        componentWillMount(){
            let value = localStorage.getItem(name);
             this.setState({value});
        }
        render(){
            return <WrappedComponent value={this.state.value}/>
        }
    }
    return NewComponent;
}
const UserName = ({value})=>(
    <input defaultValue = {value}/>
)
const UserNameFromLocal = fromLocal(UserName,'username');


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

3.2.2 从ajax中加载

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

const fromLocal = (WrappedComponent,name) =>{
    class NewComponent extends Component{
        constructor(){
            super();
            this.state = {id:null};
        }
        componentWillMount(){
            let id = localStorage.getItem(name);
            this.setState({id});
        }
        render(){
            return <WrappedComponent id={this.state.id}/>
        }
    }
    return NewComponent;
}
const fromAjax = (WrappedComponent) =>{
    class NewComponent extends Component{
        constructor(){
            super();
            this.state = {value:{}};
        }
        componentDidMount(){
            fetch(`/${this.props.id}.json`).then(response=>response.json()).then(value=>{
                this.setState({value});
            });
        }
        render(){
            return <WrappedComponent value={this.state.value}/>
        }
    }
    return NewComponent;
}
const UserName = ({value})=>{
  return <input defaultValue = {value.username}/>;
}

const UserNameFromAjax = fromAjax(UserName);
const UserNameFromLocal = fromLocal(UserNameFromAjax,'id');


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

4. render props

  • render-props
  • render prop 是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术
  • 具有 render prop 的组件接受一个函数，该函数返回一个 React 元素并调用它而不是实现自己的渲染逻辑
  • render prop 是一个用于告知组件需要渲染什么内容的函数 prop
  • 这也是逻辑复用的一种方式
<DataProvider render={data => (
  <h1>Hello {data.target}</h1>
)}/>

4.1 原生实现

class MouseTracker extends React.Component {
    constructor(props) {
        super(props);
        this.state = { x: 0, y: 0 };
    }

    handleMouseMove = (event) => {
        this.setState({
            x: event.clientX,
            y: event.clientY
        });
    }

    render() {
        return (
            <div onMouseMove={this.handleMouseMove}>
                <h1>移动鼠标!</h1>
                <p>当前的鼠标位置是 ({this.state.x}, {this.state.y})</p>
            </div>
        );
    }
}

4.2 children

class MouseTracker extends React.Component {
    constructor(props) {
        super(props);
        this.state = { x: 0, y: 0 };
    }

    handleMouseMove = (event) => {
        this.setState({
            x: event.clientX,
            y: event.clientY
        });
    }

    render() {
        return (
            <div onMouseMove={this.handleMouseMove}>
               {this.props.children(this.state)}
            </div>
        );
    }
}
ReactDOM.render(< MouseTracker >
{
    props=>(
        <>
          <h1>移动鼠标!</h1>
          <p>当前的鼠标位置是 ({props.x}, {props.y})</p>
        </>
    )
}
</ MouseTracker>, document.getElementById('root'));

4.3 render属性

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
class MouseTracker extends React.Component {
    constructor(props) {
        super(props);
        this.state = { x: 0, y: 0 };
    }

    handleMouseMove = (event) => {
        this.setState({
            x: event.clientX,
            y: event.clientY
        });
    }

    render() {
        return (
            <div onMouseMove={this.handleMouseMove}>
               {this.props.render(this.state)}
            </div>
        );
    }
}

ReactDOM.render(< MouseTracker render={params=>(
    <>
      <h1>移动鼠标!</h1>
      <p>当前的鼠标位置是 ({params.x}, {params.y})</p>
    </>
)} />, document.getElementById('root'));

4.4 HOC

class MouseTracker extends React.Component {
    constructor(props) {
        super(props);
        this.state = { x: 0, y: 0 };
    }

    handleMouseMove = (event) => {
        this.setState({
            x: event.clientX,
            y: event.clientY
        });
    }

    render() {
        return (
            <div onMouseMove={this.handleMouseMove}>
               {this.props.render(this.state)}
            </div>
        );
    }
}
function withMouse(Component){
 return (
     (props)=><MouseTracker render={mouse=><Component {...props} {...mouse}/>}/>
 )
}
let App = withMouse(props=>(
    <>
      <h1>移动鼠标!</h1>
      <p>当前的鼠标位置是 ({props.x}, {props.y})</p>
    </>
));
ReactDOM.render(<App/>, document.getElementById('root'));

5. 插槽(Portals)

  • Portals 提供了一种很好的方法，将子节点渲染到父组件 DOM 层次结构之外的 DOM 节点。
ReactDOM.createPortal(child, container)
  • 第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或 片段(fragment)
  • 第二个参数（container）则是一个 DOM 元素

index.html

 <div id="modal-root"></div>

index.js

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import './modal.css';

class Modal extends Component{
    constructor() {
        super();
        this.modal=document.querySelector('#modal-root');
    }
    render() {
        return ReactDOM.createPortal(this.props.children,this.modal);
    }
}
class Page extends Component{
    constructor() {
        super();
        this.state={show:false};
    }
    handleClick=() => {
        this.setState({show:!this.state.show});
    }
    render() {
        return (
            <div>
                <button onClick={this.handleClick}>显示模态窗口</button>
                {
                    this.state.show&&<Modal>
                    <div id="modal" className="modal">
                        <div className="modal-content" id="modal-content">
                                内容
                                <button onClick={this.handleClick}>关闭</button>
                        </div>
                    </div>
                </Modal>
                }
            </div>
        )
    }
}
ReactDOM.render(<Page/>,document.querySelector('#root'));

modal.css

.modal{
    position: fixed;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background: rgba(0,0,0,.5);
    display: block;
}

@keyframes zoom{
    from{transform:scale(0);}
    to{transform:scale(1);}
}

.modal .modal-content{
    width:50%;
    height:50%;
    background: white;
    border-radius: 10px;
    margin:100px auto;
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    animation: zoom .6s;
}

Powered by idoc. Dependence Node.js run.

混血哲谈
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
无标react高级用法
10-07
无标react高级用法
React 高级篇学习
clhdtzhh的博客
04-04 304
key 是唯一可以传递给 Fragment 的属性。
React高级语法
weixin_44978043的博客
12-14 433
1.脚手架 脚手架是一个提供了操作命令的工具插件，可以通过执行命令快速构建项目标准结构 React脚手架 facebook团队结合React项目的特性，提供了一个脚手架 create-react-app 脚手架一般都是一个插件、模块的形式的存在，一般需要安装全局依赖才能正常使用：facebook结合项目依赖推出了自己的项目依赖管理工具：yarn，用于优化项目中依赖模块的链条，操作React项目时为了避免依赖模块的版本出现问题，建议使用yarn管理项目 安装脚手架 npm install yarn -g y
react高级用法
最新发布
kuangjianming的博客
05-23 388
ref 一般可以标识在 hostComponent 宿主元素(首字母小写的，最终会变成基础HTML元素的)；ref 本身是不能跨层级捕获和传递的，forwardRef 可以接收父元素的ref信息，转发下去。类似 Vue 中的 inject 和 provider。对应过来就是 consumer 和 provider。我们可以通过forwardRef 进行转发。useMemo 的实现。
React高级用法
weixin_46920847的博客
08-21 810
关于react的HOC、Hooks、异步组件、React V18的升级的相关React高级特性讲解
react 高阶组件的两种写法
望京十三兄的博客
07-06 696
代理方式高阶组件 export default ()=> WrappedComponent => class A extends Component { render (){ const { ...otherProps } = this.props return <WrappedComponent {...otherProps}/> } } 继承方式高阶组件 export default ()=> WrappedComponent =&gt
React高级用法，高阶组件，Hooks
06-02
"React 高级用法、HOC、高阶组件、Hooks" React 高级用法是指在 React 框架中使用高阶组件（Higher-Order Component，HOC）和 Hooks 等高级技术来实现复杂的业务逻辑。高阶组件是 React 中的一种高级技巧，用于复用...
20200129-React基础-高级应用
01-08
在React开发中，掌握基础和高级应用是至关重要的。本文主要介绍了React的三个核心知识点：组合与继承的概念、错误边界的处理以及高阶组件的应用。 首先，我们来探讨一下组合与继承。在React中，组件的组合是实现...
高级React：高级React
02-12
综上所述，"高级React"涵盖了从基础的React应用开发到复杂架构和工具的使用。通过学习这些技术，开发者可以构建更健壮、更高效的Web应用，并且能够更好地适应未来的技术趋势。无论是TypeScript的类型安全，Next.js的...
react-学习高级ReactHooks研讨会
08-15
以上只是高级React Hooks的一小部分，实际应用中还包括useRef、useImperativeHandle、useLayoutEffect、useDebugValue等。在"react-学习高级React Hooks研讨会"中，我们将详细讨论这些内容，并通过实践项目进一步...
【react高级】
weixin_43124546的博客
01-27 146
1、无障碍 1、语义化的html 1、语义化的 HTML 是无障碍辅助功能网络应用的基础 2、比如当在 JSX 中使用 元素来实现 React 代码功能的时候，又或是在使用列表（， 和 ）和 HTML 时。 在这种情况下，我们应该使用 React Fragments 来组合各个组件。 2、无障碍表单 1、标记 所有的 HTML 表单控制，例如 和 ，都需要被标注来实现无障碍辅助功能。我们需要提供屏幕朗读器以解释性标注。 2、键盘焦点 在 DOM 中，当前被选中来接受键盘信息的元素。我们可以在各处看
深入理解React钩子：常用与高级用法全解析
俎树振的博客
08-31 2025
本文深入探讨了React中的钩子（Hooks），包括常用钩子如useState、useEffect、useContext、useReducer、useCallback、useMemo，以及不常用的高级钩子如useImperativeHandle、useLayoutEffect等。文章通过示例代码展示了如何使用这些钩子进行状态管理、副作用处理、性能优化、DOM操作、上下文消费、异步更新管理和与外部数据源的同步。这些钩子的灵活应用是构建高效、可维护的React应用的关键。
React 高级使用
weixin_49739911的博客
02-26 576
useState基础使用，useEffect基础使用，自定义hook，useRef基本使用，hooks-useContext高级使用，初始化mobx，mobx模块化
奥利奥-react.js高级用法
m0_70846476的博客
05-21 344
目录1. 高阶组件定义优点使用案例HOC 知名的应⽤案例：2. react hooks(v16.8新加的特性)增加hook的原因useStateuseEffectHook规则自定义hookuseRef[其他Hook API索引](https://react.docschina.org/docs/hooks-reference.html)3. 异步组件示例(异步组件+展位)实现一个异步组件lazy 1. 高阶组件 定义 把组件作为参数，并返回（高阶）组件的函数，称为高阶组件 优点 代码复⽤，状态/逻辑抽象
2019 react入门至高阶实战，含react hooks
01-23
这是2019 react入门到高级新课程学习react，不仅能带来技术提升，同时提高开发效率和体验，更能带来好的就业机会。本课程主要分为以下几个部分: 一，前端工程化基础? 主要学习node和npm、yarn的基本用法 二，es6语法学习必备的es6常用语法 。三，react基础知识 学习如何搭建react项目，以及react组件，jsx语法、css处理方案、生命周期等基础知识。 并且根据这些知识开发一个个人网站。四，react进阶知识??学习表单的处理，事件处理，Portals的使用，以及数据请求和API管理等进阶知识。五，react高阶知识??学习react高级特性，react hooks，以及整个react生态体系的构成和应用 。努力学习哟，带你精通react。
React的5种高级模式
grooyo的博客
10-19 368
让我们在 "控制反转 "中更进一步：主要的逻辑现在被转移到一个自定义的钩子中。这个钩子可以被用户访问，并且暴露了几个内部逻辑（状态、处理程序），允许他对你的组件有更好的控制。通过这5个高级React模式，我们看到了利用 "控制反转 "概念的不同方式。它们给你提供了一个强大的方法来创建灵活和适应性强的组件。然而，我们都知道这句著名的谚语：“能力越大责任越大”，你越是把控制权转移给用户，你的组件就越是远离 "即插即用 "的思维方式。作为一个开发者，你的角色是选择正确的模式来对应正确的需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值