react 基础知识
基础知识
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 基础知识的更多相关文章
- React基础知识
学习文档(按优先级排列)http://reactjs.cn/react/docs/tutorial-zh-CN.htmlhttp://www.cnblogs.com/Mrs-cc/p/4969755. ...
- React基础知识备忘
section-1 //react组件 export class Halo extends React.Component{ constructor(...args){ super(...args); ...
- React 基础知识总结
data-id="1190000016885142" data-license=""> 一.Node.js Node.js并不是一个JavaScript框 ...
- React开发实时聊天招聘工具 -第三章 React基础知识回顾
function a (props) { return <h1>hello world{this.props.asd}</h1> } class a extends React ...
- React入门---基础知识-大纲-1
-----------------在慕课网学习react入门笔记-------------- ---------博主边学边记录,手把手进行学习及记录---------- --------------- ...
- 【温故知新】—— React/Redux/React-router4基础知识&独立团Demo
前言:React专注View层,一切皆组件:全部使用ES6语法,最新版本为React16. Redux是专注于状态管理的库,和react解耦:单一状态,单向数据流.[独立团github地址] 一.Re ...
- React Native 入门基础知识总结
中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看 ...
- React:快速上手(1)——基础知识
React:快速上手(1)——基础知识 React(有时叫React.js或ReactJS)是一个为数据提供渲染为HTML视图的开源JavaScript库,用于构建用户界面. JSX.元素及渲染 1. ...
- 学习React之前你需要知道的的JavaScript基础知识
在我的研讨会期间,更多的材料是关于JavaScript而不是React.其中大部分归结为JavaScript ES6以及功能和语法,但也包括三元运算符,语言中的简写版本,此对象,JavaScript内 ...
- React学习笔记(一) 基础知识
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我. React的基 ...
随机推荐
- 多个mysql版本并行运行
mysql管理工具:mysql服务器需要客户端连接到服务器上进行管理.客户端有可能是个软件,也有可能是个java程序 安装mysql启用服务起别名+登录账号①mysqld install -m8;ne ...
- linux移植问题记录
问题一 ~/linux/linux-5.2.8$ make s3c2410_defconfig HOSTCC scripts/basic/fixdep/bin/sh: 1: scripts/bas ...
- 腾讯QQ v9.7.3.28946 绿色优化版
修改历史: 2023.02.13:自改官方 9.7.3.28946 最新正式版本2023.01.15:自改官方 9.7.1.28940 最新正式版本2023.01.07:自改官方 9.7.1.2893 ...
- JS中面向对象的多种继承方式
JS本身是基于面向对象开发的编程语言,面向对象开发中最重要的一个概念就是类. 类具有三大特性:封装.继承.多态 封装:类也是个函数,函数的目的是把一个功能代码进行封装,以此实现"低耦合高内聚 ...
- 1970:【15NOIP普及组】扫雷游戏
1970:[15NOIP普及组]扫雷游戏 时间限制: 1000 ms 内存限制: 131072 KB提交数: 5638 通过数: 3495 [题目描述] 扫雷游戏是一款十分经典 ...
- 记录下vue表单验证
公共common文件夹下建立validate.js /* 是否邮编*/ export function validateMail(rule, value,callback) { const reg = ...
- oracle 2个数组列,剔除数组重复的数据。
一.下面这样不规则的,数据如何剔除掉.循环筛选replace替换掉. 序号 正常时间 剔除时间 1 2022-12-19,2022-12-20,2022-12-21,2022-12-22,202 ...
- 2022-04-26内部群每日三题-清辉PMP
1.一家组织的经验教训数据库表明过去的重大项目问题是质量失败.项目经理在制定质量管理过程时决定做得更彻底.为确保质量,项目经理应该怎么做? A.根据项目的范围和需求制定质量管理计划. B.将所有质量控 ...
- 删除启动台(LaunchPad)残留的图标
忘记什么版本的时候以前在 "应用程序" 删除应用后,启动台自动更新删掉 不知道什么时候开始,直接在 "应用程序" 里删掉后,启动台居然不能删除了-- 10.13 ...
- iPhone添加节假日日历地址
添加苹果节假日日历地址 手动订阅节假日: 打开"设置">"日历">"帐户">"添加帐户">&qu ...