程序员经验分享-hwhale

react基础--组件通讯：props基础、子传父、父传子、兄弟组件通讯、context跨级组件、props进阶

2023-11-19

目录

一、props基础

1.1 概述

1.2 函数组件通讯

1.2.1 基本用法 

1.2.1 对象数据传递

 1.3 类组件通讯

1.4  props的特点

二、组件通讯三种方式

2.1 父传子

2.2 子传父 

2.3 兄弟组件通讯

三、context跨级组件

实现思路：

四、props进阶

4.1 children属性

4.2  props校验

4.2.1 类组件中

4.2.2 函数组件

4.3 约束规则

4.4 props默认值

4.4.1 类组件中使用props默认值

4.4.2 函数组件中使用props默认值

组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据。

在组件化过程中，我们将一个完整的功能 拆分成多个组件，以更好的完成整个应用的功能。

而在这个过程中，多个组件之间不可避免的要共享某些数据 。

为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通。这个过程就是组件通

一、props基础

1.1 概述

  • 组件是封闭的，要接收外部数据应该通过props来实现

  • props的作用：接收传递给组件的数据

  • 传递数据：给组件标签添加属性

  • 接收数据：函数组件通过参数props接收数据，类组件通过this.props接收数据

1.2 函数组件通讯

1.2.1 基本用法 

子组件

import React from 'react'

export default function Props(props) {

    console.log(props);

  return (
    <div>
        标题：{props.title}
    </div>
  )
}

index.js--父组件

import Props from "./components/Props";

function App() {
  return (
    <div>
      <Props title='蜗牛' />
    </div>
  );
}

export default App;

1.2.1 对象数据传递

如果子组件接收的数据是一个一个的字段，在对象中有很多数据需要传入，那么你可以使用es6中的扩展语法将对象的数据全部扩展进去

子组件Props.jsx

import React from 'react'

export default function Props(props) {

    console.log(props);

  return (
    <div>
        标题：{props.title}
        <br />
        姓名：{props.name}
        <br />
        年龄：{props.age}
        <br />
        地址：{props.address}
    </div>
  )
}

父组件App.jsx

import Props from "./components/Props";


let user = {
  name: '张三',
  age: 20,
  address: '红旗河沟'
}

function App() {
  return (
    <div>
      <Props title='蜗牛' {...user} />
    </div>
  );
}

export default App;

 

如果子组件接收的是整个对象，那么你可以直接将对象传入

子组件Props.jsx

import React from 'react'

export default function Props(props) {

    console.log(props);

  return (
    <div>
        标题：{props.title}
        <br />
        姓名：{props.user.name}
        <br />
        年龄：{props.user.age}
        <br />
        地址：{props.user.address}
    </div>
  )
}

父组件App.jsx

import Props from "./components/Props";


let user = {
  name: '张三',
  age: 20,
  address: '红旗河沟'
}

function App() {
  return (
    <div>
      <Props title='蜗牛' user={user} />
    </div>
  );
}

export default App;

 1.3 类组件通讯

类组件的外部数据通过this.props来访问

子组件---接收数据

import React, { Component } from 'react'

export default class PropsClass extends Component {
    constructor(props) {
        super(props);
    }
  render() {
    return (
      <div>
        标题：{this.props.title}
      </div>
    )
  }
}

父组件--传递数据

import Props from "./components/Props";

function App() {
    return (
        <div>
        <Props title='蜗牛' />
        </div>
    );
}

export default App;

1.4  props的特点

  • 可以给组件传递任意类型的数据

  • props是只读的，不允许修改props的数据

Demo.js

// 函数组件
// 方式1
export default function Demo(props) { // 或下面这种写法--解构
// export default function Demo({car, money, check, name}) {
    console.log(props);
    return (
        <div>
            <h3>Demo组件</h3>
            {
                /**方式1
                 * 
                 */
            }
            <p>{props.car}</p>
            <p>{props.money}</p>
            <p>{props.check ? '是' : '否'}</p>
            <p>{props.name}</p>
            <div>子组件：{props.money}</div>
            {
                // 方式2
                /**
                 * <p>{car}</p>
                    <p>{money}</p>
                    <p>{check ? '是' : '否'}</p>
                    <p>{name}</p>
                 */
            }
        </div>
    )
}

index.js

/**
 * 1. 导入react和react-dom
 * 2. 创建 react 元素
 * 3. 把 react 元素渲染到页面
 */
 import React from 'react';
 import ReactDom from 'react-dom/client';
 import { Component } from 'react';
 import Demo from './Demo'

 class App extends Component {
     state = {
         money: 100
     }
     render() {
         return <div>
            <h3>APP组件</h3>
            <button onClick={this.Add}>增加money</button>
            {
                /**
                 * 1. 通过属性的方式，给组件提供数据
                 * 2. 子组件中通过 props 就可以获得参数
                 */
            }
            <Demo car="小黄车" 
            money={this.state.money} 
            check={true} 
            name="zs" 
            fn = {()=>{console.log(1);}} 
            list={[1,2,3]} 
            obj = {{age: 12}}
            content = {<div>内容</div>}
            ></Demo>
            <div>父组件：{this.state.money}</div>
        </div>
     }
     Add = () => {
         this.setState({
             money: this.state.money + 10
         })
     }
 }


// 幽灵节点：节点不会渲染任何的内容，跟 vue 里面的 template 标签一样
const element = (
    <React.Fragment>
        <App></App>
    </React.Fragment>
);
  
// 参数1：渲染的 react 元素即虚拟 DOM
// 参数2：需要渲染到哪个容器中
const root = ReactDom.createRoot(document.getElementById('root'));
root.render(element);

  • 注意：在类组件中使用的时候，需要把props传递给super()，否则构造函数无法获取到props

Hello.js

/**
 * 1. 导入react和react-dom
 * 2. 创建 react 元素
 * 3. 把 react 元素渲染到页面
 */
 import React from 'react';
 import { Component } from 'react';

export default class Hello extends Component {
    constructor(props) {
        super(props)
        this.state = {
            money: this.props.money + 100
        }
    }
    render() {
        console.log(this.props);
        return (
            <div>
                <h3>类组件</h3>
                <p>{this.state.money}</p>
            </div>
        )
    }
}

index.js

/**
 * 1. 导入react和react-dom
 * 2. 创建 react 元素
 * 3. 把 react 元素渲染到页面
 */
 import React from 'react';
 import ReactDom from 'react-dom/client';
 import { Component } from 'react';
 import Hello from './Hello'

 class App extends Component {
     state = {
         money: 100
     }
     render() {
         return <div>
            <h3>APP组件</h3>
            <button onClick={this.Add}>增加money</button>
            {
                /**
                 * 1. 通过属性的方式，给组件提供数据
                 * 2. 子组件中通过 props 就可以获得参数
                 */
            }
            <Hello car="小黄车" money={500} check={false}></Hello>
        </div>
     }
     Add = () => {
         this.setState({
             money: this.state.money + 10
         })
     }
 }


// 幽灵节点：节点不会渲染任何的内容，跟 vue 里面的 template 标签一样
const element = (
    <React.Fragment>
        <App></App>
    </React.Fragment>
);
  
// 参数1：渲染的 react 元素即虚拟 DOM
// 参数2：需要渲染到哪个容器中
const root = ReactDom.createRoot(document.getElementById('root'));
root.render(element);

二、组件通讯三种方式

  • 父传子

  • 子传父

  • 非父子

2.1 父传子

  1. 父组件提供要传递的state数据

  2. 给子组件标签添加属性，值为 state 中的数据

  3. 子组件中通过 props 接收父组件中传递的数据

父组件提供数据并且传递给子组件

class Parent extends React.Component {
    state = { lastName: '王' }
    render() {
        return (
            <div>
                传递数据给子组件：<Child name={this.state.lastName} />
            </div>
        )
    }
}

子组件接收数据

function Child(props) {
	return <div>子组件接收到数据：{props.name}</div>
}

2.2 子传父 

思路：利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数。

  1. 父组件提供一个回调函数（用于接收数据）

  2. 将该函数作为属性的值，传递给子组件

  3. 子组件通过 props 调用回调函数

  4. 将子组件的数据作为参数传递给回调函数

父组件提供函数

class Parent extends React.Component {
    getChildMsg = (msg) => {
        console.log('接收到子组件数据', msg)
    }
    render() {
        return (
            <div>
            	子组件：<Child getMsg={this.getChildMsg} />
            </div>
        )
    }
}

子组件接收函数并且调用

class Child extends React.Component {
    state = { childMsg: 'React' }
    handleClick = () => {
    	this.props.getMsg(this.state.childMsg)
    }
    return (
    	<button onClick={this.handleClick}>点我，给父组件传递数据</button>
    )
}

注意：回调函数中 this 指向问题！

<span style="color:red;background:背景颜色;font-size:文字大小;font-family:字体;">你要改色的文字</span>

2.3 兄弟组件通讯

在 react 里面并没有兄弟组件通讯

但是如果在做项目的时候涉及到了兄弟组件通讯，那么就提供了一个核心的思想--状态提升

将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态

 公共父组件职责：

  • 提供共享状态

  • 提供操作共享状态的方法

要通讯的子组件只需通过 props 接收状态或操作状态的方法

index.js

/**
 * 1. 导入react和react-dom
 * 2. 创建 react 元素
 * 3. 把 react 元素渲染到页面
 */
 import React from 'react';
 import ReactDom from 'react-dom/client';
 import { Component } from 'react';
 import Jack from "./jack";
 import Rose from "./rose"
 
 class App extends Component {
    // 1. 状态提升到父组件
    state = {
        msg: ''
    }
     render() {
         return (
           <div>
            <h4>父组件</h4>
            <hr />
            <Jack say={this.changeMessage}></Jack>
            {
                // 2. 把状态给子组件显示
            }
            <Rose msg={this.state.msg}></Rose>
           </div>
         )
     }
     changeMessage = (msg) => {
        this.setState({
            msg
        })
     }
 }


//  现在的写法1
// // 幽灵节点：节点不会渲染任何的内容，跟 vue 里面的 template 标签一样
// const element = (
//     <React.Fragment>
//         <App></App>
//     </React.Fragment>
// );
  
// // 参数1：渲染的 react 元素即虚拟 DOM
// // 参数2：需要渲染到哪个容器中
// const root = ReactDom.createRoot(document.getElementById('root'));
// root.render(element);

// 现在的写法2
ReactDom.createRoot(document.getElementById('root')).render(<App />)

// 老版本写法
// ReactDom.render(<App />, document.getElementById('root'))

jack.js

import React, { Component } from 'react'

export default class Jack extends Component {
  render() {
    return (
      <div>
        <h4>Jack子组件</h4>
        <button onClick={this.say}>speak</button>
      </div>
    )
  }
  say = () => {
    this.props.say('you jump i look')
  }
}

rose.js

import React, { Component } from 'react'

export default class Rose extends Component {
  render() {
    return (
      <div>
      <h4>Rose子组件--{this.props.msg}</h4>
      </div>
    )
  }
}

三、context跨级组件

思考：App 组件要传递数据给 Child 组件，该如何处理？

处理方式：使用 props 一层层组件往下传递（繁琐）

更好的方式：使用 Context

推荐方式：在后续可能就不用 context 了，而是用 redux

作用：跨组件传递数据（比如：主题、语言等）

实现思路：

  1. 调用 React. createContext() 创建 Provider（提供数据） 和 Consumer（消费数据） 两个组件。
  2. 使用 Provider 组件作为父节点。
  3. 设置 value 属性，表示要传递的数据。
  4. 调用 Consumer 组件接收数据。

index.js

/**
 * 1. 导入react和react-dom
 * 2. 创建 react 元素
 * 3. 把 react 元素渲染到页面
 */
 import React from 'react';
 import ReactDom from 'react-dom/client';
 import { Component } from 'react';
import Father from "./Father"
 
// 1. 调用 React.createContext() 创建 Provider（提供数据） 
// 和 Consumer（消费数据） 两个组件
// Provider 包裹根元素，Provider 就是最大的根元素
const { Provider, Consumer } = React.createContext()
export { Consumer }
 class App extends Component {
    state = {
        color: 'green'
    }
     render() {
         return (
            <Provider value={this.state.color}>
                <div>
                    <h4>APP组件</h4>
                    <hr />
                    <Father></Father>
                </div>
            </Provider>
         )
     }
 }


//  现在的写法1
// // 幽灵节点：节点不会渲染任何的内容，跟 vue 里面的 template 标签一样
// const element = (
//     <React.Fragment>
//         <App></App>
//     </React.Fragment>
// );
  
// // 参数1：渲染的 react 元素即虚拟 DOM
// // 参数2：需要渲染到哪个容器中
// const root = ReactDom.createRoot(document.getElementById('root'));
// root.render(element);

// 现在的写法2
ReactDom.createRoot(document.getElementById('root')).render(<App />)

// 老版本写法
// ReactDom.render(<App />, document.getElementById('root'))

Father.js 

import React, { Component } from 'react'
import Son from './Son'

export default class Father extends Component {
  render() {
    return (
      <div>
        <div>父组件</div>
        <hr />
        <Son></Son>
      </div>
    )
  }
}

Son.js

import React, { Component } from 'react'
import Sun from "./Sun";

export default class Son extends Component {
  render() {
    return (
      <div>
        <div>子组件</div>
        <hr/ >
        <Sun></Sun>
      </div>
    )
  }
}

Sun.js

import React, { Component } from 'react'
import { Consumer } from './index'

export default class Sun extends Component {
  render() {
    return (
      <div>
        <Consumer>
            {
                (value) => <div style={{color: value}}>子孙组件--{value}</div>
            }
        </Consumer>
      </div>
    )
  }
}

index.js

/**
 * 1. 导入react和react-dom
 * 2. 创建 react 元素
 * 3. 把 react 元素渲染到页面
 */
 import React from 'react';
 import ReactDom from 'react-dom/client';
 import { Component } from 'react';
import Father from "./Father"
 
// 1. 调用 React.createContext() 创建 Provider（提供数据） 
// 和 Consumer（消费数据） 两个组件
// Provider 包裹根元素，Provider 就是最大的根元素
const { Provider, Consumer } = React.createContext()
export { Consumer }
 class App extends Component {
    state = {
        color: 'red',
        bgColor: 'skyblue'
    }
    changeColor = (color) => {
        this.setState({
            color
        })
    }
     render() {
        const { color, bgColor } = this.state
         return (
            <Provider value={{color, bgColor, changeColor: this.changeColor}}>
                <div>
                    <h4>APP组件</h4>
                    <hr />
                    <Father></Father>
                </div>
            </Provider>
         )
     }
 }


ReactDom.createRoot(document.getElementById('root')).render(<App />)

Father.js

import React, { Component } from 'react'
import Son from './Son'

export default class Father extends Component {
  render() {
    return (
      <div>
        <div>父组件</div>
        <hr />
        <Son></Son>
      </div>
    )
  }
}

Son.js

import React, { Component } from 'react'
import Sun from "./Sun";

export default class Son extends Component {
  render() {
    return (
      <div>
        <div>子组件</div>
        <hr/ >
        <Sun></Sun>
      </div>
    )
  }
}

Sun.js

import React, { Component } from 'react'
import { Consumer } from './index'

export default class Sun extends Component {
  render() {
    return (
      <div>
        <Consumer>
            {
                ({color, bgColor, changeColor}) => 
                <div style={{color: color, backgroundColor: bgColor}}>
                    <div>子孙组件</div>
                    <button onClick={() => changeColor('yellow')}>修改</button>
                </div>
            }
        </Consumer>
      </div>
    )
  }
}

总结：

  1. 如果两个组件是远方亲戚（比如，嵌套多层）可以使用Context实现组件通讯

  2. Context提供了两个组件：Provider 和 Consumer

  3. Provider组件：用来提供数据

  4. Consumer组件：用来消费数据

四、props进阶

4.1 children属性

表示该组件的子节点，只要组件有子节点，props就有该属性

children 属性与普通的props一样，值可以是任意值（文本、React元素、组件，甚至是函数）

index.js

function Hello(props) {
  return (
    <div>
      该组件的子节点：{props.children}
    </div>
  )
}

<Hello>我是子节点</Hello>

4.2  props校验

对于组件来说，props是外来的，无法保证组件使用者传入什么格式的数据  

如果传入的数据格式不对，可能会导致组件内部报错。组件的使用者不能很明确的知道错误的原因 校验接收的props的数据类型，增加组件的健壮性

对于某些应用程序来说，你可以使用 Flow 或 TypeScript等JavaScript扩展来对整个应用程序做类型检查。但即使你不使用这些扩展，React 也内置了一些类型检查的功能。要在组件的 props 上进行类型检查，你只需配置特定的 propTypes 属性：

props校验允许在创建组件的时候，就约定props的格式、类型等

作用：规定接收的props的类型必须为数组，如果不是数组就会报错，增加组件的健壮性。

通过静态属性设置propTypes属性去校验外部数据的类型

propTypes是固定的单词，不能写错了，写错了校验不生效。

如果是老版本，你需要手动下载prop-types插件

yarn add prop-types

  1. 导入 prop-types 包

  2. 使用组件名.propTypes = {} 来给组件的props添加校验规则

  3. 校验规则通过 PropTypes 对象来指定

4.2.1 类组件中

可以在类外部设置静态属性propTypes

import React, { Component } from 'react'
import PropTypes from 'prop-types';

class PropsClass extends Component {
    constructor(props) {
        super(props);
    }
  render() {
    return (
      <div>
        标题：{this.props.title}
      </div>
    )
  }
}

PropsClass.propTypes = {
    title: PropTypes.string,
    isShow: PropTypes.bool
}

export default PropsClass;

也可以在类内部设置static静态属性propTypes

import React, { Component } from 'react'
import PropTypes from 'prop-types';

class PropsClass extends Component {

    static propTypes = {
        title: PropTypes.string,
        isShow: PropTypes.bool
    }

    constructor(props) {
        super(props);
    }
  render() {
    return (
      <div>
        标题：{this.props.title}
      </div>
    )
  }
}

export default PropsClass;

4.2.2 函数组件

import React from 'react'
import PropTypes from 'prop-types';

function Props(props) {

    console.log(props);

  return (
    <div>
        标题：{props.title}
        <br />
        姓名：{props.user.name}
        <br />
        年龄：{props.user.age}
        <br />
        地址：{props.user.address}
    </div>
  )
}

Props.propTypes = {
    title: PropTypes.string.isRequired
}

export default Props;

4.3 约束规则

  1. 常见类型：array、bool、func、number、object、string

  2. React元素类型：element

  3. 必填项：isRequired

  4. 特定结构的对象：shape({})

// 常见类型
optionalFunc: PropTypes.func,
// 必选
requiredFunc: PropTypes.func.isRequired,
// 特定结构的对象
optionalObjectWithShape: PropTypes.shape({
	color: PropTypes.string,
	fontSize: PropTypes.number
})

4.4 props默认值

场景：分页组件 每页显示条数

作用：给 props 设置默认值，在未传入 props 时生效

4.4.1 类组件中使用props默认值

通过静态属性defaultProps设置外部数据的默认值

defaultProps这个单词是固定的，不能写错，写错了默认值不生效。

1）在类里面通过static设置静态属性

import React, { Component } from 'react'

class PropsClass extends Component {

     static defaultProps = {
         title: '80期'
     }

    constructor(props) {
        super(props);
    }
  render() {
    return (
      <div>
        标题：{this.props.title}
      </div>
    )
  }
}
export default PropsClass;

2）可以在类外部设置静态属性

import React, { Component } from 'react'

class PropsClass extends Component {

    constructor(props) {
        super(props);
    }
  render() {
    return (
      <div>
        标题：{this.props.title}
      </div>
    )
  }
}

PropsClass.defaultProps = {
    title: '80期111'
}

export default PropsClass;

以上两种方式是等价的，都是静态属性

4.4.2 函数组件中使用props默认值

外部数据props的默认值，需要在组件上添加静态属性defaultProps

defaultProps这个单词是固定的，不能写错，写错了默认值不生效。

import React from 'react'

function Props(props) {
  return (
    <div>
        标题：{props.title}
        <br />
        姓名：{props.user.name}
        <br />
        年龄：{props.user.age}
        <br />
        地址：{props.user.address}
    </div>
  )
}

Props.defaultProps = {
    title: '蜗牛'
}
export default Props;

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

React

ReactJS

前端

react基础--组件通讯：props基础、子传父、父传子、兄弟组件通讯、context跨级组件、props进阶 的相关文章

随机推荐

  • XSS常见的触发标签

    无过滤情况 img 图片加载错误时触发 img src x img src 1 鼠标指针移动到元素时触发 img src 1 鼠标指针移出时触发 img src 1 a a href https www qq com qq a a href

  • 微信小程序开发通过mock后台数据，如何使用mock模拟后台数据，以及在小程序中使用

    作为一名前端开发人员 应该有很多像我一样不会写后台接口 但是网上非常多的项目都是需要后台数据支持的 这个时候前端开发人员可能会犯愁 现在我给大家推荐一个网站 可以帮助我们简单模拟后代数据 1 首先 在该网址https www fastmoc

  • 实验1-FPGA编程入门

    文章目录 一 认识全加器 二 输入原理图实现1位加法器 一 半加器原理图输入 二 全加器原理图输入 三 Verilog语言实现全加器 四 总结 五 资料参考 一 认识全加器 一 半加器 1 逻辑分析 如下图所示 半加器只有两个输入和两个输出

  • Windows10自动更新-修改注册表

    Win r 输入 regedit 打开注册表 注册表路径 HKEY LOCAL MACHINE SYSTEM ControlSet001 Services wuauserv Parameters 后面加了个 disable 方便以后改回来

  • 比较两个 List 的值是否相等

    public static

  • python+requests+excel+unittest+ddt接口自动化数据驱动并生成html报告

    前言 1 环境准备 python3 6 requests xlrd openpyxl HTMLTestRunner api 2 目前实现的功能 封装requests请求方法 在excel填写接口请求参数 运行完后 重新生成一个excel报告

  • Flutter进阶实战 6-20 酷炫的路由动画-2

    前言 前面在路由动画1中我们介绍了 渐隐渐现过度动画 的使用 这里再介绍三种动画以及叠加动画的使用 一 缩放路由动画 return ScaleTransition scale Tween begin 0 0 end 1 0 animate

  • 保存文件为UTF8格式（Writing UTF-8 files in C++）.

    都是简单的单词 我就不翻译了 原文地址 http mariusbancila ro blog 2008 10 20 writing utf 8 files in c Let s say you need to write an XML fi

  • Ant design 组件实现动态列表

    文章目录 一 动态列表 二 场景实现 实现效果 实现代码 一 动态列表 动态列表Form List是包含多个表单的情况 往往是多维数组数据 意思就是往往这个数据传递到后端是数组数据 二 场景实现 实现效果 实现代码 import React

  • Nacos快速入门（一）：Nacos初探

    1 简介 Nacos官网 https nacos io zh cn index html 1 1 概览 Nacos 致力于帮助您发现 配置和管理微服务 Nacos 提供了一组简单易用的特性集 帮助您快速实现动态服务发现 服务配置 服务元数据

  • Linux_CentOS8_磁盘管理_磁盘大小调整_`No space left on device` （2）

    Issue CentOS8 in the VMware No space left on device 1 Issue Description Initially 20G Hard Disk SCSI was portioned to th

  • Python的复制，深拷贝和浅拷贝的区别

    在python中 对象赋值实际上是对象的引用 当创建一个对象 然后把它赋给另一个变量的时候 python并没有拷贝这个对象 而只是拷贝了这个对象的引用 一般有三种方法 alist 1 2 3 a b 1 直接赋值 传递对象的引用而已 原始列

  • 三目运算的多目运算技巧（三种及三种以上的状态怎么使用）

    1 使用场景 当有人一提到三目运算就会想着用0 1代表男女等的显示问题 只有两种状态值 但你有没有想过当状态不止两种的时候 比如三种及以上的时候 也可以使用三木运算呢 答案是可以 比如常用的vue数据渲染的时候 div class Bott

  • IntelliJ Idea 常用快捷键列表

    IntelliJ Idea 常用快捷键列表 Ctrl Shift Enter 语句完成 否定完成 输入表达式时按 键 Ctrl E 最近的文件 Ctrl Shift E 最近更改的文件 Shift Click 可以关闭文件 Ctrl OR

  • linux 内核学习3-自己编译一个ARM Linux内核

    linux 内核学习3 自己编译一个ARM Linux内核 1 目的 编译一个ARM版本的内核镜像 谁让我是做Android的呢 并且在QEMU上运行 2 准备工作 2 1 开发环境 ubuntu 18 4虚拟机 linux内核版本 4 1

  • 高清人脸数据集—FFHQ

    FFHQ全称Flickr Faces Hight Quality Flickr Faces HQ 是英伟达作为生成对抗网络 GAN 的基准创建的 也用于Style GAN的训练数据集中 于2019年开源 FFHQ是一个高质量的人脸数据集 包

  • 悟空CRM9.0（JAVA版）正式发布

    悟空CRM9 0 JAVA版 悟空软件长期为企业提供企业管理软件 CRM HRM OA ERP等 的研发 实施 营销 咨询 培训 服务于一体的信息化服务 悟空软件以高科技为起点 以技术为核心 以完善的售后服务为后盾 秉承稳固与发展 求实与创

  • 归一化

    归一化方法 线性归一化 也称min max标准化 离差标准化 是对原始数据的线性变换 使得结果值映射到 0 1 之间 转换函数如下 x x

  • Java的扩容机制

    类别 初始容量 扩容方式 最大容量 HashMap 16 达到0 75就乘2 2的30次方 HashSet 16 达到0 75就乘2 2的30次方 Hashtable 11 达到0 75就乘2 1 Integer MAX VALUE 8 A

  • react基础--组件通讯：props基础、子传父、父传子、兄弟组件通讯、context跨级组件、props进阶

    目录 一 props基础 1 1 概述 1 2 函数组件通讯 1 2 1 基本用法 1 2 1 对象数据传递 1 3 类组件通讯 1 4 props的特点 二 组件通讯三种方式 2 1 父传子 2 2 子传父 2 3 兄弟组件通讯 三 co

热门标签