【React】React 学习笔记

文章目录

1. React 是什么？

React 是一个声明式，高效且灵活的用于构建用户界面的JavaScript库。使用React 可以将一些简短、独立的代码片段组合成复杂的UI界面，这些代码片段被称作“组件”

2. React 特点

声明式设计 - React采用声明范式，可以轻松描述应用
高效 - React通过对DOM的模拟，最大限度地减少与DOM的交互
灵活 -React可以与已知的库或框架很好的配合
JSX -JSX是JavaScript语法的扩展
组件 - 通过React构建组件，使得代码更加容易得到复用
单向响应的数据流 - React实现了单向响应的数据流，从而减少了重复代码

3. React 安装

使用create-react-app 快速构建React 开发环境
create-react-app 自动创建的项目是基于Webpack + ES6
执行一下命令创建项目：

 cnpm install -g create-react-app
 create-react-app my-react
 cd my-react
 npm start

4. React JSX

React 使用JSX来替代常规的JavaScript
JSX是一个看起来很像XML的JavaScript语法扩展，在JSX中你可以任意使用JavaScript 表达式，只需要用一个大括号将表达式括起来。

在JSX中嵌入表达式
下面例子中，声明一个名为name的变量，然后在JSX中使用它，并将它包裹在大括号中

const name = 'Rick';
const element = <h1>Hello, {
   name}<h1>;

ReactDOM.render(
   element,
   document.getElementById('root')
);
// Hello,Rick

在JSX语法中，你可以在花括号里放置任何有效的JavaScript表达式

function formatName(user) {
   
  return user.firstName + ' And ' + user.lastName; 
}

const user = {
   
  firstName: "Rick",
  lastName: "Motty"
}
const element = <h1>Hello! {
   formatName(user)}</h1>
ReactDOM.render(
  element,
  document.getElementById('root')
);

// Hello! Rick And Motty

JSX 中指定属性
可以通过使用引号，来将属性值指定为字符串字面量：

const element = <div tabIndex="0"></div>

也可以使用大括号，来在属性值中插入一个JavaScript表达式：

const element = <img src = {
   user.avatarUrl}></img>

警告：

因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用
camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。

例如，JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex。

5. React元素渲染

元素是构成React 应用的最小单位，它用于描述屏幕上输出的内容

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

想要将React元素渲染到根DOM节点中，我们通过把它们都传递给ReactDOM .render()的方法来将其渲染到页面上

const element = <h1>Hello, world！</h1>
ReactDOM.render(
   element,
   document.getElementById('example')
);

更新已渲染的元素
React 元素是不可变对象。
更新UI唯一方式是创建一个全新的元素，并将其传入ReactDOM.render()

考虑一个计时器的例子

function tick() {
   
  const element = (
     <div>
        <h1>Hello,world!</h1>
        <h2>It is {
   new Date().toLocaleTimeString()}.</h2>
     </div>
  );
  ReactDOM.render(element,document.getElementById('root'));
}

setInterval(tick,1000);

注意： React只更新它需要更新的部分

6. 组件 & Props

函数组件与class组件
函数组件

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

该函数是一个有效的React组件，因为它接受唯一带有数据的“props”（代表属性）对象与并返回一个React元素。这类组件被称为“函数组件”，因为它本质上就是JavaScript 函数

class 组件

class Welcome extends React.Component {
   
  render() {
   
    return <h1>Hello, {
   this.props.name}</h1>;
  }
}

渲染组件
React 元素可以是用户自定义的组件：

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

当React 元素为用户自定义组件时，它会将JSX所接受的属性以及子组件转换为单个对象传递给组件，这个对象称之为“props”

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

const element = <Welcome name="Rick"/>;
ReactDOM.render(
  element,
  document.getElementById('root')
)

// Hello,Rick

Props 的只读性
组件无论是使用函数声明还是通过class声明，都绝不能修改自身的props。

function sum(a,b) {
   
  return a + b;
}

这样的函数被称为"纯函数”，因为该函数不会尝试更改入参，且多次调用下相同的入参始终返回相同的结果

function withdraw(account, amount) {
   
  account.total -= amount
}

React 非常灵活，但它也有一个严格的规则：

所有React 组件都必须像纯函数一样保护它们的props不被更改