react 学习笔记(一)

创作人 Leo


编辑时间 Wed Nov 23,2022 at 15:03


babel

babel 用来将高级代码(jsx es6)转换为浏览器兼容代码

开始使用

新建一个目录并执行

# npm init -y
# npm install babel-cli@6 babel-preset-react-app@3

在该目录新建 src 目录并执行

npx babel --watch src --out-dir . --presets react-app/prod

npx 是 npm 的高级版,他会自动找 node_modules/.bin 下面的命令 该命令会阻塞终端,并监听 src 目录下js文件的修改,自动编译为浏览器兼容的 js 文件放在指定的输出目录下
这样,在旧浏览器上也能够使用现代 JavaScript 的语法特性,比如 class

jsx

jsx 是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX,JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言,但它具有 JavaScript 的全部功能。

const element = <h1>Hello, world!</h1>;

create react app

组件 & Props

组件允许你将 UI 拆分为独立可复用的代码片段,并对每个片段进行独立构思。本指南旨在介绍组件的相关理念。

组件 api

props 是组件的入参,使用组件时,通过给标签传属性值设置

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 一般情况下我们都是使用类来描述组件,使用函数有很多不便之处,比如类支持 componentDidxxx 系列的方法
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

调用组件

const element = <Welcome name="Sara" />;

注意:props 是只读的,组件无论是使用函数声明还是通过 class 声明,都决不能修改自身的 props。

State & 生命周期

State 它保存了在这个组件中有状态的数据,一个组件会有很多数据,每个数据的更新被描述成一种状态更新
我称它为数据驱动,通过数据的改变使当前的组件呈现不同的形态
不同于 Props,State是动态的私有的

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

这是官网示例,他是一个时钟,会在每秒更新,我们来详细解读:

首先通过 this.state = {date: new Date()}; 为组件定义了一个有状态数据
然后在组件的生命周期函数 componentDidMount (当组件完成初始化)中设置了定时器,每秒更新 date 的值
render 描述了组件如何被渲染到界面,h2 中的值会随着时间流逝不停的更新

事件处理

条件渲染

循环列表

Hook

useEffect

useEffect 做了什么? 通过使用这个 Hook,你可以告诉 React 组件需要在渲染后执行某些操作。React 会保存你传递的函数(我们将它称之为 “effect”),并且在执行 DOM 更新之后调用它。在这个 effect 中,我们设置了 document 的 title 属性,不过我们也可以执行数据获取或调用其他命令式的 API。

useEffect 在组件渲染后执行,所以他是不阻塞UI的,这一点和安卓的“不在渲染线程执行网络请求”是一个逻辑


阅读:2245
搜索
  • Linux 高性能网络编程库 Libevent 简介和示例 2578
  • web rtc 学习笔记(一) 2354
  • Mac系统编译PHP7【20190929更新】 2304
  • react 学习笔记(一) 2244
  • zksync 和 layer2 2237
  • Hadoop 高可用集群搭建 (Hadoop HA) 2182
  • Hadoop Map Reduce 案例:好友推荐 2151
  • 小白鼠问题 2085
  • Linux 常用命令 2082
  • 安徽黄山游 2058
简介
不定期分享软件开发经验,生活经验