React前段学习（一）

什么是React?

React 是一个用于构建用户界面的 JavaScript 库

React官方文档：https://react.docschina.org/

React 从诞生之初就是可被逐步采用的

HTML 中使用 React

Hello World

页面上展示一个 "Hello, world!"

ReactDOM.render(
  
Hello, world!
,
  document.getElementById('root')
);

JSX

const element = 
>Hello, world!
;

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

在 JSX 中嵌入表达式

const name = 'Shao Jie';
const element = 
Hello, {name}
;

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

在 JSX 语法中，可以在大括号内放置任何有效的 JavaScript 表达式。例如：2 + 2，user.firstName

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

const user = {
    firstName: 'Shao',
    lastName: 'Jie'
};

const element = (
  

    Hello, {formatName(user)}!
  
);

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

这东西像不像 Java 里面的面向对象

在编译之后，JSX 表达式会被转为普通 JavaScript 函数调用，并且对其取值后得到 JavaScript
对象。也就是说，你可以在 if 语句和 for 循环的代码块中使用 JSX，将 JSX 赋值给变量，把 JSX 当作参数传入，以及从函数中返回 JSX：

const user = false;

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

function getGreeting(user) {
    debugger
    if (user) {
        return 
Hello, {formatName(user)}!
;
    }
    return 
Hello, Stranger.
;
}

const element = (
    

        Hello, {getGreeting(user)}!
    
);

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

JSX 特定属性

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

const element = 
;

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

const element = ![]({user.avatarUrl}>);

官方警告
因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。
例如，JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex。

元素渲染

元素是构成 React 应用的最小砖块。

const element = 
Hello, world
;

与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。

元素与另一个被熟知的概念——"组件"表达的并不是一个东西

将一个元素渲染为 DOM

假设你的 HTML 文件某处有一个

：

其称为“根” DOM 节点，因为该节点内的所有内容都将由 React DOM 管理。

仅使用 React 构建的应用通常只有单一的根 DOM 节点。如果你在将 React 集成进一个已有应用，那么你可以在应用中包含任意多的独立根 DOM 节点。

想要将一个 React 元素渲染到根 DOM 节点中，只需把它们一起传入 ReactDOM.render()：

const element = 
Hello, world
;
ReactDOM.render(element, document.getElementById('root'));

更新已渲染的元素

React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。

考虑一个计时器的例子：

function tick() {
  const element = (
    

      
Hello, world!
      
It is {new Date().toLocaleTimeString()}.
    
  );
  ReactDOM.render(element, document.getElementById('root'));
}
// 每秒调用一次
setInterval(tick, 1000);

组件 & Props

组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。

组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。

function Welcome(props) {
    return 
Hello, {props.name}
;
}

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

上述两个组件在 React 里是等效的

渲染组件

const element = ;

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

例如，这段代码会在页面上渲染 “Hello, Shao Jie”

function Welcome(props) {
  return 
Hello, {props.name}
;
}

const element = ;
ReactDOM.render(
  element,
  document.getElementById('root')
);

这个例子是如何调用的：

1. 我们调用 ReactDOM.render() 函数，并传入 作为参数。
2. React 调用 Welcome 组件，并将 {name: 'Shao Jie'} 作为 props 传入。
3. Welcome 组件将

   Hello, Shao Jie

   元素作为返回值。
4. React DOM 将 DOM 高效地更新为

   Hello, Sara

   。

官方建议 ：
组件名称必须以大写字母开头。 例如： Welcome

组合组件

function Welcome(props) {
  return 
Hello, {props.name}
;
}

function App() {
  return (
    

      
      
      
    
  );
}

ReactDOM.render(
  ,
  document.getElementById('root')
);

Props 的只读性

组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props

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

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

React有着严格的规则： 所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

React前段小白，学习React中，当前为个人学习记录，摘取React官方文，核心概念 1~4 小节，如有问题，请自行参考 React官方文档