持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情

前言

哈喽大家好，我是Lotzinfly，一位前端小猎人。欢迎大家再次来到前端丛林，在这里你将会遇到各种各样的前端猎物，我希望可以把这些前端猎物统统拿下，嚼碎了服用，并成为自己身上的骨肉。今天是国庆假期第一天，也是我们冒险的第一天，在这七天假期里，让我们入门React实现弯道超车。你们准备好了吗？那么开始我们的冒险之旅吧！

1.什么是React?

React 是一个用于构建用户界面的JavaScript库核心专注于视图,目的实现组件化开发

2. 组件化的概念

我们可以很直观的将一个复杂的页面分割成若干个独立组件,每个组件包含自己的逻辑和样式再将这些独立组件组合完成一个复杂的页面。这样既减少了逻辑复杂度，又实现了代码的重用

可组合：一个组件可以和其他的组件一起使用或者可以直接嵌套在另一个组件内部
可重用：每个组件都是具有独立功能的，它可以被使用在多个场景中
可维护：每个小的组件仅仅包含自身的逻辑，更容易被理解和维护

3.搭建React开发环境

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

默认会自动安装React,react由两部分组成,分别是:

react.js 是 React 的核心库
react-dom.js 是提供与DOM相关的功能,内部比较重要的方法是render,它用来向浏览器里插入DOM元素

4.JSX

4.1 什么是JSX

一种JS和HTML混合的语法,将组件的结构、数据甚至样式都聚合在一起定义组件
JSX其实只是一种语法糖,最终会通过babeljs转译成 createElement 语法,以下代码等价

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

4.2 什么是元素

元素是构成 React 应用的最小单位
元素用来描述你在屏幕上看到的内容
React当中的元素事实上是普通的JS对象,ReactDOM来确保浏览器中的DOM数据和React元素保持一致

<h1 className="title" style={{color:'blue'}}>hello</h1>

React.createElement("h1", {
   className: "title",
   style: {
   color: 'blue'
   }
}, "hello");

createElement的结果

{
  type:'h1',
  props:{
    className: "title",
    style: {
      color: 'blue'
     }
   },
   children:"hello"
}

4.3 JSX表达式

可以任意地在 JSX 当中使用 JavaScript 表达式，在 JSX 当中的表达式要包含在大括号里

let title = 'hello';
ReactDOM.render(
  <h1>{title}</h1>,
  document.getElementById('root')
);

4.4 JSX属性

注意:JSX并不是html,在JSX中属性不能包含关键字，像class需要写成className,for需要写成htmlFor,并且属性名需要采用驼峰命名法

ReactDOM.render(
  <h1 className="title" style= {{color:'blue'}}>Hello</h1>,
  document.getElementById('root')
);

4.5 JSX也是对象

可以在 if 或者 for 语句里使用 JSX
将它赋值给变量，当作参数传入，作为返回值都可以

4.6 更新元素渲染

React 元素都是不可变的。当元素被创建之后，你是无法改变其内容或属性的。一个元素就好像是动画里的一帧，它代表应用界面在某一时间点的样子。
更新界面的唯一办法是创建一个新的元素，然后将它传入 ReactDOM.render() 方法

import React from 'react';
import ReactDOM from 'react-dom';
function tick() {
  const element = (
   <div>
    {new Date().toLocaleTimeString()}
   </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
 }
setInterval(tick, 1000);

4.7 React只会更新必要的部分

React DOM 首先会比较元素内容先后的不同，而在渲染过程中只会更新改变了的部分。
即便我们每秒都创建了一个描述整个UI树的新元素，React DOM 也只会更新渲染文本节点中发生变化的内容

5. 组件 & Props

可以将UI切分成一些独立的、可复用的部件，这样你就只需专注于构建每一个单独的部件
组件从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素

5.1 函数(定义的)组件

函数组件接收一个单一的 props 对象并返回了一个React元素

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

5.2 类(定义的)组件

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

5.3 组件渲染

React元素不但可以是DOM标签，还可以是用户自定义的组件
当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）转换为单个对象传递给组件，这个对象被称之为 props
组件名称必须以大写字母开头
组件必须在使用的时候定义或引用它
组件的返回值只能有一个根元素

function Welcome(props) {
   return <h1>Happy, {props.name}</h1>;
}
const element = <Welcome name="国庆快乐！" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

5.4 复合组件&提取组件

组件由于嵌套变得难以被修改，可复用的部分也难以被复用，所以可以把大组件切分为更小的组件
当你的UI中有一部分重复使用了好几次（比如，Button、Panel、Avatar），或者其自身就足够复杂（比如，App），类似这些都是抽象成可复用组件的绝佳选择

5.5 Props的只读性

无论是使用函数或是类来声明一个组件，它决不能修改它自己的 props
纯函数没有改变它自己的输入值，当传入的值相同时，总是会返回相同的结果
所有的React组件必须像纯函数那样使用它们的props

//纯函数
function sum(a, b) {
  return a + b;
}
//非纯函数
function withdraw(account, amount) {
  account.total -= amount;
}

5.6 进类型检查

要在组件的 props 上进行类型检查，只需配置特定的 propTypes 属性
可以通过配置特定的 defaultProps 属性来定义 props 的默认值

结尾

好啦，这期的前端丛林大冒险先到这里啦！这期对React做了一个开头，介绍一些关于React的基本属性，大家一定要打好基础，把它搞定，啃下来嚼烂嚼透。希望大家可以好好品尝并消化，迅速升级，接下来我们才更好地过五关斩六将！好啦，我们下期再见。拜拜！

【前端丛林】React这样服用，效果更佳（1）

前言