react 笔记

2021-07-12 19:32:46 阅读：129 来源： 互联网

React

构建react本地应用

npx create-react-app my-app
cd my-app
npm start

官网`CDN`

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

项目目录结构

my-app
src

react 函数组件、class、hook

函数组件
主要用于拆分组件时使用
class组件
一般不用，除非业务逻辑对生命周期要求十分严格
hook
官方推荐，替代class使用，有利于函数式编程以及单元测试

使用react编码时的Tip

引用图片资源

动态引入，需要在结尾加.default否则图片不显示
<img src={require('./../../images/JD.png').default} alt="JD" />

静态引入
import jd from './../../images/JD.png '
<img src={jd} alt="JD" />

添加层叠样式

使用方式：

// 定义
const styles = {
    box: {
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
    }
}
let box ={
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
}
// 也可以定义在单独的样式js里，在需要用的页面使用import引用，定义的每一个变量前要加`export`

// 使用
<div style={styles.box}> // 单个行内样式JSX
<div style={{display: "flex",justifyContent: "center",alignItems: "center",}}/>  // 单个行内样式
<div style={{...styles.box}}/>  // 单个行内样式JSX，通过es6`...`展开变量
<div style={{...styles.box, ...styles.box}}/> // 多个行内样式JSX，通过es6`...`展开变量
<div className={box}/>  // 单个className样式JSX
<div className={[box,box].join(' ')}/>  // 多个className样式JSX，通过`.join(' ')` 将多个变量展开

ES6

let a = ()=>{ // do }

export

// 定义
export let Jd_goods_tab_btn = (props) => {
    return (
        <div>
            狗东西
        </div>
    );
}

//引用
import {Jd_goods_tab_btn} from "./Domain";
import {Jd_goods_tab_btn as btn} from "./Domain"; // as可以重命名导入的函数名

// 使用
<Domain.Jd_input/>

hook

基本格式：

import React, {useState, useEffect} from 'react';

export default function Home() {
    const [msg, setMsg] = useState('');

    useEffect(() => {    // Update the document title using the browser API
    });

    return "hook";
};

标签：样式,笔记,react,export,import,btn,JSX
来源： https://www.cnblogs.com/lambertlt/p/15003523.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9