react基础笔记

最新推荐文章于 2024-05-03 11:08:18 发布
最新推荐文章于 2024-05-03 11:08:18 发布
阅读量162 收藏 1
点赞数
分类专栏： react 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42553568/article/details/106484522
版权

一 . 基础概念

  1. JSX是一种JavaScript的语法扩展，拓展了 XML 写法。
  2. 在 React 中，所有的东西看做是 JS，HTML 结构是 JS，CSS 样式描述也是 JS。
  3. React 允许直接在 JS 文件中写 HTML 代码
  4. 因为 JSX 允许直接直接在 JS 中写 XML 语法，所以特别灵活

二 . react中的数据显示

  1. 字符串直接显示

  2. 数字直接显示

  3. 对象, 不能直接显示会报错

  4. 布尔值 不会显示

  5. 数组, 数组里是字符串或数字就会把每一项都显示出来, 对象会报错

  6. 数据绑定用{} vue里用{{}}

  7. 列表渲染
    使用数组的 map 方法把数组映射成 JSX 数组。

    	import React from 'react';

	const foods = [
	  { id:1, name:'牛排', price: 99 },
	  { id:2, name:'鸡排', price: 199 },
	  { id:3, name:'鸭排', price: 199 },
	];
	
	function App() {
	  return (
	    <div className="App">
	      <ul>
	        { 
	              foods.map((v,i)=><li key={i}>食物名称：{v.name}，价格是：{v.price}</li>) 
	        }
	      </ul>
	    </div>
	  );
	}
	export default App;

  8. 条件渲染

    { true ? <h1>结构1</h1> : <h2>结构2</h2> }

  9. 短路运算

    { true &&  <h1>结构1</h1> }

  10. 属性绑定用{},

     <img  src={变量} />

  11. 行内样式绑定

    import React from 'react';

   const styleObj = {
     width:'200px',
     height:'200px',
     backgroundColor:'pink',
   };
   
   function App() {
     return (
       <div className="App">
         <div style={styleObj}>盒子</div>
       </div>
     );
   }
   export default App;

    要把样式放到对象里

  12. 渲染html字符串

    	import React from 'react';

   const htmlStr = '<h1>标题字符串</h1>';
   
   
   
   function App() {
     return (
       <div className="App">
         <div dangerouslySetInnerHTML={{__html: htmlStr}}></div>
       </div>
     );
   }
   export default App;

    用dangerouslyInnerHTML={{__html: ‘html字符串’}}来显示

  13. 组件多个属性可以用结构语法

    import React from 'react';

   const props = {
     type: "text",
     'data-tip': '请输入内容',
     className:"box"
   }
   
   
   function App() {
     return (
       <div className="App">
         <input {...props} />
       </div>
     );
   }
   export default App;

三 . 组件

  1. 函数组件

    1. 外观就是一个函数
    2. this 指向 undefined
    3. 没有内部的数据 state - 状态，函数式组件的数据一般是父组件传递过来的。
    4. 没有组件生命周期
    5. 运行速度和体验比较好
    6. 适合比较简单业务的功能
    	function Btn(props){
		return <div>按钮组件</div>
	}
    1. 函数组件首字母必须大写
    2. 通过参数获取父组件传递的属性或方法

  2. 类组件

    1. 外观就是一个 es6 的 class
    2. 有 this 指向
    3. 有内部自己的数据 state - 状态
    4. 修改 state this.setState 更新数据和视图。
    5. 有组件的生命周期函数
    6. 适合做复杂业务功能
    import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Home extends Component {
  state = {
    msg: "大家好呀"
  }
  handleClick() {
    // undefined
    console.log(this);
  }
  render() {
    return (
      <div>
        <div onClick={this.handleClick} >小标题</div>
      </div>
    )
  }
}

ReactDOM.render(<Home />, document.getElementById('root'))
    1. 使用箭头函数就可以避免事件内部this为undefined为空的问题, 也可以使用bind来处理
      <div onClick={this.handleClick.bind(this)} >小标题</div>

  3. 受控组件
    必须同时给与 onChange 事件和绑定 value 属性。
    value 值如果绑定了数据，默认情况 value 是只读的。
    需要通过 onChange 绑定事件获取表单值和改变表单值。
    更多受控组件
    <input type="text" />
    <input type="checkbox" />
    <input type="radio" />
    <textarea />
    <select />

四 . 组件父子传值

  1. 父传子通过属性传值
    class HomeTop extends Component {
  render() {
    return (
      <h1>屋顶的颜色是 {this.props.acolor} 尺寸 {this.props.asize}</h1>
    )
  }
}
class Home extends Component {
  state = {
    color: "blue",
    size: 100
  }
  render() {
    return (
      <div>
        <HomeTop acolor={this.state.color} asize={this.state.size} ></HomeTop>
      </div>
    )
  }
}
    子组件通过props 获取
  2. 子传父通过事件触发的方式
    import React from 'react';

function Btn1(props) {
  const obj = { color: 'red' };
  const fn = () => {
    props.aa(obj);
  };
  return <button onClick={fn}>按钮1-变红</button>;
}

function Btn2(props) {
  const obj = { color: 'blue' };
  const fn = () => {
    props.bb(obj);
  };
  return <button onClick={fn}>按钮2-变蓝</button>;
}

class App extends React.Component {
  state = {
    color: 'green'
  };

  changeColor = (obj) => {
    this.setState({ color: obj.color });
  };

  render() {
    return <div>
      <Btn1 aa={this.changeColor} ></Btn1>
      <Btn2 bb={this.changeColor}></Btn2>
      <div style={{ backgroundColor: this.state.color }}>父组件的某个盒子</div>
    </div>;
  }
}

export default App;
    父组件先把函数传给子组件, 子组件要触发时九调用父组件传递的事件, 并通过参数向父组件传递函数

五 . 生命周期

  1. 组件挂载
    componentWillMount 组件挂载前的钩子函数
    componentDidMount 组件挂载后的钩子函数
  2. 组件数据更新
    shouldComponentUpdate 在更新更新组件前的拦截器
    componentDidMount 组件数据更新后的钩子函数
    等等其他钩子函数
  3. 组件卸载
    componentWillUnmount 组件卸载前的钩子函数

六 . 组件性能问题

  1. 高性能组件
    就是在父组件更新时, 会触发子组件的更新, 高性能组件就是通过判断判断组件的props和state, 当它们没有发生变化时就不更新,可以通过继承React.PureComponent和数据深拷贝来实现
class List extends React.PureComponent {
  render() {
    return (
      <ol>
        {
          this.props.list.map((item, index) => <li onDoubleClick={() => this.props.aa(index)} key={item}>{item}</li>)
        }
      </ol>
    );
  }
}

React.PureComponent, 也是在shouldComponentUpdate进行了props和state的比较, 不进行数据深拷贝的话有props里的数组对象始终指向同一个对象怎么比较都相等
通过JSON.parse(JSON.stringify( xxx ))来进行深拷贝

六 . 样式

  1. 全局样式
    直接import 导入

    	import './App.css';
	import './style/aaa.css';

  2. 局部样式
    局部样式命名有规范： ***.module.css 这是脚手架工具规定的。
    导入的时候保存变量： import 变量名 from '***.module.css'；
    把原本的类名变成对象属性的写法： className={styles.btn}

    import style from "./style.module.scss";
<button className={style.btn}>嘎嘎嘎嘎嘎</button>

七 . redux

  1. Redux 的设计思想
    视图与状态是一一对应的。
    所有的状态，保存在一个对象里面。

  2. 引入创建仓库的方法

    import { createStore } from 'redux';

  3. 创建管理员

    const defaultState = { aa: 123 };

const reducer = (state = defaultState) => {
  return state;
};

  4. 创建仓库对象

    const store = createStore(reducer);

  5. 获取仓库数据

    store.getState()

  6. 修改仓库状态

    store.dispatch(action)

    管理员函数会被触发, 要在管理员函数里操作仓库数据
    store.dispatch只是发送action数据

  7. 设置监听函数, 一旦仓库数据发生变化九自动执行这个函数

    const listener = ()=> {} 	
let unsubscribe = store.subscribe(listener);

    unsubscribe 是subscribe返回的取消订阅的函数
    let unsubscribe()会取消监听state数据变化

八 . react-redux

  1. react-redux 是基于 原生 redux 上封装的一个插件库，用起来比原生 redux 简单一些

  2. 创建管理员

  3. 创建仓库和redux一样

  4. 在整个项目的入口引入仓库, 引入Provider

    import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import { Provider } from 'react-redux';

import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

    用Provider组件包括根组件, 并把仓库实例传递过去

  5. 用connect 来处理组件, 把仓库里的值映射到props里

    import React from 'react';

import { connect } from 'react-redux';

class Header extends React.Component {
    render() {
        return (
            <header>
                <h1>页面头部访问 store 数据： {this.props.num}</h1>
            </header>
        );
    }
}

const mapStateToProps = (state) => ({
    num: state.num
});

const superHeader = connect(mapStateToProps)(Header);

export default superHeader;

    connect有两个参数mapStateToProp用来将仓库的数据映射到props里
    mapDispatchToProps 是将dispatch方法映射到props里

    import React from 'react';

import { connect } from 'react-redux';

class Main extends React.Component {
    render() {
        return (
            <section>
                <hr />
                <h3>页面主体{this.props.num}</h3>
                <button onClick={this.props.aaaa}>改仓库状态</button>
                <hr />
            </section>
        );
    }
}

const mapStateToProps = (state) => ({
    num: state.num
});

const mapDispatchToProps = (dispatch) => ({
    aaaa() {
        const action = {
            type: 'add',
            value: 1
        };
        dispatch(action);
    }
});

const SuperMain = connect(mapStateToProps, mapDispatchToProps)(Main);

export default SuperMain;

九 . 在配置嵌套路由时, 嵌套路由的父路由千万不要带exact不然子路由会匹配不到!!!

qq_42553568
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React基础笔记.md
07-27
React基础笔记.md
React-创建组件、父传子、子传父
weixin_44486539的博客
02-09 380
组件是 React 的核心，是 View 的重要组成部分；React 中的组件分为两种：一种是函数组件（使用函数来创建组件），另一种是类组件（通过类创建的组件）。 通过函数来定义组件 通过函数定义的组件被称为无状态组件，在定义时函数名称的首字母必须要大写，React 在解析时会按照组件的形式去解析 函数值必须要有返回值，返回值为 jsx 语法；使用时将函数名作为标签使用，可以是单标签 <ta...
React（1） 关于创建React项目及 基础语法 和React父子组件传值概要 State和Props介绍 this指向
weixin_42646130的博客
06-17 246
搭建React开发环境 1.安装官方脚手架 npm i -g create-react-app 2.创建项目 create-react-app 项目名 3.启动项目 npm start JSX基础语法 1.XML基本语法 只允许一个标签包裹 标签一定要闭合 2.元素类型 小写首字母对应DOM元素 大写首字母对应组件元素 注释使用js注释方法 3.元素属性 class属性改为classN...
react子组件获取父组件传过来的值
weixin_42588966的博客
04-05 3766
<CategorySelector categoryId={ this.state.categoryId } parentCategoryId={ this.state.parentCategoryId } onCategoryChange={(categoryId, parentCategoryId) => this.onCategoryChange(categoryI...
react中类组件传值
夜空孤狼啸的博客
03-29 1505
类组件传值 父子 组件传值 子 传 父： 子组件：事件的触发 sendMsg=()=>{ this.props.person(); } 父组件： <Child person={this.getMsg}></Child> getMsg=(data)=>{
react请求gateway数据（JSON）
BarryLee的博客
02-13 643
 使用jquery，试了几个版本都出现同源问题，还是自己懂底层好哇，一点问题没有，完美 var api = 'xxx'; var xmlhttp = new XMLHttpRequest(); xmlhttp.open("POST", api, true); xmlhttp.setRequestHeader("Content-Type", "application/json"); xmlht...
React基础 笔记
Formattor的博客
05-15 164
React特点 声明式 组件化 web,mobile,vr React安装 npm i react react-dom react使用 引入 <script src="./node_modules/react/umd/react.development.js"></script> <script src="./node_modules/react-dom/umd/react-dom.development.js"></script> 创建元素 /
React基础笔记--1
m0_62475892的博客
07-01 645
在默认环境下，脚手架给我们安装的是预编译语言，我们可以替换。步骤如下：先移除旧的预编译器npm i less和：安装less预编译，注意版本不能太高，否则不兼容。
React基础笔记
ddmz57703的博客
09-11 115
引入React <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> react.js 是 Reac...
React基础笔记（一）
qq_55978913的博客
01-20 340
为什么开始学习React呢？ 主要是我感觉Vue.js学的差不多了，就想继续拓展一下，然后就开始学习React demo https://gitee.com/zyzcos/react-study React 个人理解：React也是一个渐进式框架，可以有选择性的在网站的一小部分使用React React的使用： <!-- 1.创建React渲染的容器 --> <div id='like_button_container'></div> <!-- 2.加载Re
react基础笔记（1）
AJINNIU的博客
11-15 495
react 创建 1. npm i react react-dom 2.引用到需要使用的页面 二.创建react 元素 React.createElement('h1',null,'hello react') 参数一：元素名称 参数二：元素属性 参数N :元素的子节点 3.渲染react元素 ReactDOM.render(title,document.getElementById('root')) 参数一：要渲染的React元素 参数二：挂载点 React脚手架 1.初始化项目 npx create-
01-react基础笔记.md
06-23
01-react基础笔记.md
React Native 基础学习笔记.rar
01-28
React Native 基础学习笔记
react基础与进阶部分笔记
03-18
react基础与进阶部分笔记
react开发基础笔记
12-29
react源码分析以及重要代码开发简介以及建议，可以用于实战演练以及联系，用于企业级开发 react源码分析以及重要代码开发简介以及建议，可以用于实战演练以及联系，用于企业级开发 react源码分析以及重要代码开发...
vue快速入门（五十）重定向
最新发布
不起眼小菜菜的博客
05-03 364
注释很详细，直接上代码……
bpmn-js推荐几款常用的插件
飞云先生
04-30 156
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
遍历JavaScript对象（字典）
weixin_45596561的博客
05-01 352
遍历JavaScript对象（字典）是编程中常见的需求。for...in循环提供了最直接的方式，但在某些情况下可能需要额外的检查。与forEach结合使用提供了另一种遍历方式，特别是在您使用现代JavaScript版本时。根据您的具体需求和偏好，可以选择最适合您的遍历方法。
表格隔行变色
weixin_54339833的博客
05-02 410
2.$(document).ready() 是 jQuery 中的一个函数，它确保在文档结构（DOM）加载完成后执行指定的代码。与原生 JavaScript 的 window.onload 不同，$(document).ready() 会在 HTML 文档结构被加载和解析完成后立即执行，而无需等待样式表、图片和子框架的完成加载。if (index % 2 === 0) { // 偶数行。if (i % 2 === 0) { // 偶数行。// 可以省略，因为默认背景色通常是白色。
react尚硅谷笔记
09-12
对不起，我没有访问互联网的权限，无法提供尚硅谷关于React的笔记。但是，React是一个流行的JavaScript库，用于构建用户界面。它提供了组件化的开发方式，可以将整个界面拆分成多个独立且可重用的组件。React还使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值