React- 核心概念-简单理解

React

官方文档：中文文档 英文文档

一、React 是什么？

• 用于构建用户界面的 JavaScript 库

二、相关概念

1. JSX

• 全称: JavaScript XML
• react并没有采用将标记与逻辑分离这种人为的分离方式，而是将两者存在放在称之为组件的松散耦合单元之中来实现关注点分离
• jsx是react官方推荐的一种语法糖；在react开发中不是必选的，但推荐使用；
• babel将jsx编译成react.creactElement(component,props,…children),这样就可以在html标签中使用
• jsx实际上是变量、是对象、是react元素；使用时必须要引入react;在jsx中可以使用表达式，但要使用{}包裹；jsx可以嵌套；默认防注入攻击；可以复用；

//demo：
import React from 'react'

export default App = () => {
 	const name = 'Josh'
	return (<>
	 	<h1>Hello, {name}</h1>
	 	{
	 	  name === 'Josh' ? <p>啊啊啊啊<p/> : <p>啦啦啦啦</p>
	 	}
	 	<span style={{color:'red'}}>你好呀</span>
	</>)

}

2.元素渲染

• 元素是构成 React 应用的最小砖块
• 想要将一个 React 元素渲染到根 DOM 节点中，只需把它们一起传入 ReactDOM.render()

const element = (<div>
  <p>Hello</p>
  <p>qq</p>
</div>)
ReactDOM.render(element, document.getElementById('root'));

3. 组件

• 概念：类似于 JS 函数，它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素；
• 作用：复用代码、简化代码
• 分类：函数式组件、类组件
• 函数式组件(无状态组件)

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

• 类组件

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

• 函数式组件 和 类组件 区别：
  • 类组件是使用class关键字定义的组件；特点是有state，有生命周期，有上下文，ref，this等特性；
  • 函数式是使用function函数或箭头函数定义的组件，组件由于没有state，被称为无状态组件；特点是没有生命周期，没有上下文，this,ref等特性。
• 创建组件的几种方式：
  • 使用ES5API：creatReactElement创建
  • 使用class类关键字创建
  • 使用ES5function函数或箭头函数创建无状态组件
• React 元素也可以是用户自定义的组件；组件名称必须以大写字母开头（自定义组件）；组件可以进行多次渲染（组合组件）；

4.Props

• 调用组件的时候在组件中添加属性传到组件内部去使用
• 只读性，是不可变的：所有 React 组件都必须像纯函数一样保护它们的 props 不被更改

5.State、setState

• 用于更新vm,触发diff运算，更新视图（不操作 DOM，虚拟DOM）
• 默认是异步的，但在定时器中是同步的
• 不要直接修改 State
• 当有多个setState执行时，react会将其自动合并，只执行一次diff运算，一次视图更新
• setState本质是同步，只不过让react做成了异步的样子；因为要考虑性能，多次state修改，只进行一次DOM渲染。即在promise.then之前，state已经计算完了；不是微任务或者宏任务

6.生命周期

• react生命周期分为三个阶段：装载阶段、更新阶段、销毁阶段。在装载阶段常用的生命周期有三个：cunstructor,render,componentDidMount;在更新阶段常用的有两个：render 和 componentDidUpdate;在销毁阶段有一个：componentWillUnmount

7.事件处理

• 命名：小驼峰式
• 使用JSX语法时需要传入一个函数作为事件处理函数

<button onClick={activateLasers}>
  Activate Lasers
</button>

• 阻止默认行为：必须显式的使用 preventDefault

  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }
  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );

• 向事件处理程序传递参数

<button onClick={(e) => deleteRow(id, e)}>Delete Row</button>

8. 条件渲染

• if
• &&
• 三目运算符
• 阻止组件渲染：return null

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    <div className="warning">
      Warning!
    </div>
  )
  render() {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning} />
      </div>
    );
  }
}

9.列表 & key

• 渲染多个组件

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);

• key : 唯一性

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>{number}</li>
);

• 补充： key的作用可以简单理解为有一叠书，从这叠书中随机抽取一本，如果存在key就可以很快知道它是哪一本它的位置；key最好不要用index！

10.表单

• 在react中数据是单向绑定的，要想让视图变化，state数据必须改变
• 受控表单：value / check 由state完全控制
• 非受控表单：value / check 不受state完全控制

11.状态提升

• 通常，多个组件需要反映相同的数据变化，建议将共享状态提升到最近的共同父组件中去
• 通常，state 都是首先添加到需要渲染数据的组件中去。但是，如果其他组件也需要这个 state，那么你可以将它提升至这些组件的最近共同父组件中。你应当依靠自上而下的数据流，而不是尝试在不同组件间同步 state。
• 简单理解：多个组件都需要用到同一个数据（或需要反映相同的数据变化）时，可以将数据提升到父组件中存储、处理；可以放在父组件的state里面，通过函数setState; 父组件通过props将state数据、处理函数传给子组件。这样多个子组件可以通过props拿到数据，同时也可以通过处理函数更新父组件中的state

12. 组合 vs 继承

• 组合：
  • 推荐！react有十分强大的组合模式
  • Props 和组合提供了清晰而安全地定制组件外观和行为的灵活方式。注意：组件可以接受任意 props，包括基本数据类型，React 元素以及函数。
  • 包含关系：有些组件无法提前知晓它们子组件的具体内容，即为不管孩子是什么都可以加进这个容器中作为它的子组件；如：侧边栏、对话框；

    function FancyBorder(props) {
      return (
        <div className={'FancyBorder FancyBorder-' + props.color}>
          {props.children}
        </div>
      );
    }
     //这使得别的组件可以通过 JSX 嵌套，将任意组件作为子组件传递给它们
     function WelcomeDialog() {
      return (
        <FancyBorder color="blue">
          <h1 className="Dialog-title">
            Welcome
          </h1>
          <p className="Dialog-message">
            Thank you for visiting our spacecraft!
          </p>
        </FancyBorder>
      );
    }
    //类似vue中的 插槽 ，但react中没有插槽的概念
    

  • 特例关系:包容化组件进行扩展，形成某一种特殊的组件

     //WelcomeDialog 是 Dialog 的特殊实例
      function Dialog(props) {
        return (
          <FancyBorder color="blue">
            <h1 className="Dialog-title">
              {props.title}
            </h1>
            <p className="Dialog-message">
              {props.message}
            </p>
          </FancyBorder>
        );
      }
      
      function WelcomeDialog() {
        return (
          <Dialog
            title="Welcome"
            message="Thank you for visiting our spacecraft!" />
        );
      }
    

• 继承
  • 不推荐！
  • 官方解释是在成百上千个组件中使用 React，并没有发现需要使用继承来构建组件层次的情况。
• 如果想要在组件间复用非 UI 的功能，建议将其提取为一个单独的 JavaScript 模块，如函数、对象或者类。组件可以直接引入（import）而无需通过 extend 继承它们。