G_Owen
G_Owen

React 基础笔记

概览

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

React 大体包含下面这些概念：

  • 组件
  • JSX
  • Virtual DOM
  • Data Flow

组件

可以将UI 拆分为独立且复用的代码片段，每部分都可独立维护。
组件，从概念上类似于 JavaScript 函数。它接受任意的参数（即 “props”），并返回用于描述页面展示内容的React 元素。
自定义组件命名：必须以大写字母开头，React 会将以小写字母开头的组件视为原生DOM标签。

import React from 'react'; // React 的核心库
import ReactDOM from 'react-dom'; // 提供与 DOM 相关的功能
class ShoppingList extends React.Component {
  render() {
    return (
      

        
Shopping List for {this.props.name}

        
    
          
  • Instagram
    • 
          
  • WhatsApp
    • 
          
  • Oculus
    • 
        

      

    );
  }
}

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

React 应用都是构建在组件之上。ShoppingList就是一个React 组件类型，ReactDOM.render 函数会将组件方到页面上的某个节点元素中。(render 返回了一个 React 元素 ，这是一种对渲染内容的轻量级描述。)
大多数 React应用只会调用一次 ReactDOM.render()。

其中props（是 properties 的简写） 是组件包含的两个核心概念之一，另一个是state。

props

props接收一些其他组件的参数（比如上方的 name )，来配置组件，所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

state

state 来实现所谓“记忆”的功能。可以通过 React 组件的构造函数中设置 this.state;this.state 应该被视为一个组件的私有属性。
修改this.state值需要通过this.setState方法赋值,有些 props 值或 state 值可能是异步更新的，使用对象赋值的方式更改 state 可能无效，可使用回调传参方式更新

this.setState(  (state,props)=> ({count:state.count + props.count}) );

类组件

通过 class 语法来定义组件，必须包含render() 方法,并且继承于 React.Component。
类组件必须包含render()，并且return 只能返回一个父元素（类似vue中的template中必须要有一个父元素）。

class Square extends React.Component {
  /**
   * @name constructor
   * @param {*} props
   * 每次定义子类的构造函数时，都必须调用 super 方法。
   * 因此，在所有含有构造函数的React组件中，构造函数必须以super(props)开头
   * state 保存着组件中的数据 类似 vue 中的 data 属性
   */
  constructor(props) {
    super(props);
    this.state = {
      value:null
    };
  }
  render() {
    return (
      
    );
  }
}

render方法中的onClick 事件监听函数中调用this.setState方法，可以设置this.state 中的属性
推荐使用箭头函数，避免this 造成困扰。

简单组件(函数组件)

简单组件是一个函数，不需要使用class关键字，当然就没有constructor和state

const Square =  (props) => {
 return  ()
}

受控组件

input、