基础知识

css-module

react 将js转为vdom,react-dom将vdom转为dom

// 外面一层是一个动态值,里面的表示的是对象
<img src={logo} style = {{width: 200px}} />

webpack里配置的如果要用模块化作用需要模块化导出,形式如下

模块化css模块很有必要,将 css 文件命名为xxx.module.css,引入的时候赋予其名称,在标签上使用时带上名称和css属性名即可。

import style from './index.module.css'

// use
<img src={logo} className={style.img} />

问题 :

  • 多个className如何实现
  • 公共样式和模块样式的使用
  • less语法的使用需要配置吗?

Context

import React, {Component} from 'react';

// 创建上下文
const Context = React.createContext(); // 创建提供者
const Provider = Context.Provider; // 创建消费者
const Consumer = Context.Consumer; function Child(props) {
return (
<button onClick={() => {
props.addNum();
}}>
{props.number}
</button>
);
} class ContextApp extends Component {
constructor(props) {
super(props);
this.state = {
number: 0
};
} addNum = () => {
this.setState({
number: this.state.number + 1
});
}; render() {
return (
<Provider value={{ number: this.state.number, addNum: this.addNum }}>
<Consumer>
{value =>
<Child {...value}/>
}
</Consumer>
</Provider>
);
}
} export default ContextApp;

组件复合

类比于vue的插槽功能

import React from 'react';

function Slot(props) {
return (
<div>{props.children}</div>
);
} // 复合组件的使用
function Composition(props) {
return (
<div>
<Slot>
<h1>我是标题</h1>
<h3>我是内容</h3>
</Slot>
</div>
);
} export default Composition;

jsx是一个对象,我们返回具有名称的复合组件子组件可以通过 props.children.xxx 获得

import React from 'react';

function Slot(props) {
return (
<div>
{props.children.body}
{props.children.footer}
</div>
);
} // 复合组件的使用
function Composition(props) {
return (
<div>
<Slot>
{{
body: (
<>
<h1>我是标题</h1>
<h3>我是内容</h3>
</>
),
footer: (
<>
<h1>我是Footer</h1>
</>
)
}}
</Slot>
</div>
);
} export default Composition;
import React from 'react';

function Slot(props) {
const file = {
one: { values: 'aaa', keys: 333 },
two: { values: 'bbb', keys: 444 },
};
// 传递值给插槽处
const { body, footer } = props.children(file[props.fileId]);
return (
<div>
{body}
{footer}
</div>
);
} // 复合组件的使用
function Compons(props) {
return (
<div>
<Slot fileId={'one'}>
{
({ values, keys }) => ({
body: (<><h1>我是标题</h1><h3>value: {values}--- key:{keys}</h3></>),
footer: (<><h1>我是Footer</h1></>)
})
}
</Slot>
</div>
);
} export default Compons;

高阶组件

接收一个组件作为参数,返回一个组件

react 基础知识的更多相关文章

  1. React基础知识

    学习文档(按优先级排列)http://reactjs.cn/react/docs/tutorial-zh-CN.htmlhttp://www.cnblogs.com/Mrs-cc/p/4969755. ...

  2. React基础知识备忘

    section-1 //react组件 export class Halo extends React.Component{ constructor(...args){ super(...args); ...

  3. React 基础知识总结

    data-id="1190000016885142" data-license=""> 一.Node.js Node.js并不是一个JavaScript框 ...

  4. React开发实时聊天招聘工具 -第三章 React基础知识回顾

    function a (props) { return <h1>hello world{this.props.asd}</h1> } class a extends React ...

  5. React入门---基础知识-大纲-1

    -----------------在慕课网学习react入门笔记-------------- ---------博主边学边记录,手把手进行学习及记录---------- --------------- ...

  6. 【温故知新】—— React/Redux/React-router4基础知识&独立团Demo

    前言:React专注View层,一切皆组件:全部使用ES6语法,最新版本为React16. Redux是专注于状态管理的库,和react解耦:单一状态,单向数据流.[独立团github地址] 一.Re ...

  7. React Native 入门基础知识总结

    中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看 ...

  8. React:快速上手(1)——基础知识

    React:快速上手(1)——基础知识 React(有时叫React.js或ReactJS)是一个为数据提供渲染为HTML视图的开源JavaScript库,用于构建用户界面. JSX.元素及渲染 1. ...

  9. 学习React之前你需要知道的的JavaScript基础知识

    在我的研讨会期间,更多的材料是关于JavaScript而不是React.其中大部分归结为JavaScript ES6以及功能和语法,但也包括三元运算符,语言中的简写版本,此对象,JavaScript内 ...

  10. React学习笔记(一) 基础知识

    现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我. React的基 ...

随机推荐

  1. fabric学习笔记9

    fabric学习笔记9 20201303张奕博 2023.1.20 Python Web3 与智能合约的交互 开发合约,或者开源合约,都会有一份该合约的ABI JSON文件 ABI文件包括了智能合约的 ...

  2. iOS开发 性能优化

    1.快 2.稳 3.省 4.小

  3. 免费语音转文字----使用Adobe Premiere Pro

    软件版本:Adobe Premiere Pro 2023   打开Adobe Premiere Pro,新建项目:   将要转为文字的录音拖入轨道:   序列→自动转录序列:   选择想要的设置,转录 ...

  4. Mac提升效率软件推荐

    1.HapiGo 高效启动器 能快速搜索文件.启动程序.打开网页.翻译.截图翻译等  相当于中文版的 Alfred 2.Rectangle 能快速对当前应用窗口进行分屏 3.iTerm2 一款比系统终 ...

  5. pytest+allure接口自动化

    python类库依赖: pip3 install pytestpip3 install allure-pytestpip3 install rerequestspip3 install pytest- ...

  6. 分布式计算 Distributed computing

    分布式计算(Distributed computing),又译为分散式运算,是一门计算机科学,它研究如何把一个需要非常巨大的计算能力才能解决的问题分成许多小的部分,然后把这些部分分配给许多计算机进行处 ...

  7. python 通过win32com操作vcf到outlook中,同时解决乱码问题

    之前用的黑莓手机,故障后换了iphone,后来还是想用上黑莓Q10.于是有了该文章. 问题: 如何将iphone上的通讯录导入黑莓? 网上回答1:通过icloud将iphone中的通讯录导入黑莓手机. ...

  8. Linux配置文件和网络常用命令总结

    Linux应用配置大全 Linux网络基本配置 最小化安装的话是没有ifconfig命令的需要使用yum search ifconfig查找,然后yum install net-tools.x86_6 ...

  9. 15、java递归解决迷宫问题

    递归真是一个.看着简单,听着简单,写不出来,想不到.以前也不是不理解递归,也不是看不懂递归的代码,但说实话真的很难想到自己去用这个递归也很难理清楚这个递归到底从哪里开始到哪里结束,将哪个步骤作为 一个 ...

  10. 解决Fiddler设置的代理总是被自动关闭,The system proxy was changed

    火绒剑过滤路径ProxyOverride 停用服务SangforSP https://www.cnblogs.com/jspider/p/15896503.html