React基础入门

JSX

JSX 是在JavaScript 语法上的拓展，允许 HTML 代码和 JS 一起写。

///单行代码
const heading = Mozilla Developer Network;
///多行代码
const header = (
 
   Mozilla Developer Network
 
);
///heading/header 常量称为 JSX 表达式
///React 可以使header在我们的应用程序中进行渲染

JSX浏览器无法直接读取并解析，JSX表达式，经过parcel或babel编译后：

const header = React.createElement("header", null,
 React.createElement("h1", null, "Mozilla Developer Network")
);

实际开发中也可以跳过编译步骤，直接使用React.createElement()构建UI。

创建React应用

npx包运行器；npm包管理器

创建react应用并启动

# 创建react应用模板
npx create-react-app react-demo
# 如果既有yarn又有npm,在创建时可以指定使用哪个创建
npx create-react-app react-demo --use-npm
#启动react应用
cd react-demo
#运行应用在http://localhost:3000
npm start

在React中，组件是组成应用程序的可重复利用的模块。

组件 & Props

函数组件与class组件

// 函数组件
function TestComponent(props) {
 return  Hi , {props.value} 
}
///ES6 class组件
class TestComponent extends React.Component {
 render(){
  return  Hi , {this.props.value} 
}
}

注意： 组件名称必须以大写字母开头。小写字母开头的组件视为原生 DOM 标签

Props 的只读性

///纯函数，a、b的值不会被修改
function sum(a, b) {
 return a + b;
}

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

State&生命周期

///计时器组件
class Clock extends React.Component {
 ///构造函数
 constructor(props) {
   super(props)
   ///初始时间状态 & 计数器状态
   this.state = { 
     date: new Date(), 
     counter: 1 
  }
}
 ///返回组件的JSX
 render(){
   return (
     
        当前时间：{this.state.date.toLocaleTimeString()} 
        时间更新次数：{this.state.counter}
     
  )
}
 ///生命周期函数
 ///组件已经被渲染到DOM中时调用
 componentDidMount() {
   const timerHandler = ()=>{
     ///错误示范
     // this.setState({
     //   counter: this.state.counter + this.props.increment,
     // });
     //联合更新，使用箭头函数，方式如下：
     this.setState((state,props)=>({
       date: new Date(),
       counter: state.counter +=  parseInt(props.increment)
    }))
     // 联合更新，使用普通函数，方式如下：
     this.setState(function(state,props){
       return {
         date: new Date(),
         counter: state.counter +=  parseInt(props.increment)
      }
    })
     ///简单更新
     this.setState({
       date: new Date()
    })

  }
   ///启动定时器
  this.timerId = setInterval(timerHandler,2000)
  console.log("componentDidMount")
}
 ///组件更新时调用
 componentDidUpdate(){
   console.log("componentDidUpdate")
}
 ///组件被销毁之前调用
 componentWillUnmount(){
   clearInterval(this.timerId)
   console.log("componentWillUnmount")
}
}

State 的更新可能是异步的，因此不能使用在setState中使用this.state。
组件可以选择把它的 state 作为 props向下传递到它的子组件中：


function FormattedDate(props) {
  return It is {props.date.toLocaleTimeString()}.;
}

事件处理

React 事件的命名采用小驼峰式（camelCase），而不是纯小写
使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串

<--- 传统html --->

<---React写法--->

事件添加

///普通函数
class LoggingButton extends React.Component {
 constructor(){
   super()
   ///传建一个和原函数体相同的函数，这个函数和this进行绑定
   this.handleClick = this.handleClick.bind(this)
}
 // 若不绑定严格模式下，未bind，则this指向undifined
 handleClick(){
   console.log('this is:', this);
}
 render() {
   return (
     
      ///或者直接绑定
      
  );
}
}

///箭头函数
class LoggingButton extends React.Component {
 // 此语法确保 `handleClick` 内的 `this` 已被绑定。
 // 注意: 这是 *实验性* 语法。
 handleClick = () => {
   console.log('this is:', this);
}
 render() {
   return (
     
  );
}
}

向事件处理函数传参

///普通函数
handleClick(id){
   console.log('this is:', this);
   console.log(id)
}

///箭头函数

条件渲染

元素变量

//声明一个变量并使用 if 语句进行条件渲染
render() {
   const isLoggedIn = this.state.isLoggedIn;
   let button;
   if (isLoggedIn) {
     button = ;
  } else {
     button = ;
  }
   return (
     
       
      {button}
     
  );
}

`&&`运算符

JavaScript 中，true && expression 总是会返回 expression, 而 false && expression 总是会返回 false。如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它。

render() {
  const count = 0;
  return (
    
      {count && Messages: {count}}
    
  );
}

三目运算符

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    
      {isLoggedIn
        ? 
        : 
      }
    
  );
}

阻止组件渲染

在极少数情况下，你可能希望能隐藏组件，即使它已经被其他组件渲染。若要完成此操作，你可以让 render 方法直接返回 null，而不进行任何渲染。

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }
  return (
    
      Warning!
    
  );
}
///其他组件引用`WarningBanner`,当warn为空，该组件不被渲染
 render() {
    return (
      
        
        
      
    );
  }

列表&`Key`

const root = ReactDOM.createRoot(document.getElementById('root'));
const numbers = [1, 2, 3, 4, 5];
root.render(
  
   
  
);

function List(param) {
  ///集合的`Map`转换
  ///key 帮助 React 识别哪些元素改变了
  const listItem = param.values.map((num,index)=>{num} )
  return {listItem}
  ///或者
  return {param.values.map((num,index)=>{num}
 )}    
}

用`Key`提取组件

元素的 key只有放在就近的数组上下文中才有意义。
比方说，如果你提取出一个 ListItem 组件，你应该把 key 保留在数组中的这个元素上，而不是放在 ListItem 组件中的

元素上。
错误示例：

function ListItem(props) {
  const value = props.value;
  return (
    // 错误！你不需要在这里指定 key：
    
      {value}
    
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 错误！元素的 key 应该在这里指定：
    
  );
  return (
    
      {listItems}
    
  );
}

正确示例：

///正确示例
function ListItem(props) {
  // 正确！这里不需要指定 key：
  return {props.value};
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 正确！key 应该在数组的上下文中被指定
    
  );
  return (
    
      {listItems}
    
  );
}

组合&继承

组件使用一个特殊的 children 属性，来将他们的子组件传递到组件中。

function FancyBorder(props) {
  return (
    
      {props.children}
    
  );
}
function WelcomeDialog() {
  return (
     
      ///children
      
        Welcome
      
    
  );
}

也可以自定义属性

function FancyBorder(props) {
  return (
    
      {props.content}
    
  );
}
function WelcomeDialog() {
  const content =   Welcome 
  return (
     
  );
}

代码分割

为了避免搞出大体积的代码包，需要进行代码分割。代码分割是由诸如 Webpack，Rollup 和 Browserify（factor-bundle）这类打包器支持的一项技术，能够创建多个包并在运行时动态加载。

import()

///使用之前
import { add } from './math';
console.log(add(16, 26));
///使用之后
import("./math").then(math => {
  console.log(math.add(16, 26));
});

React.lazy

React.lazy 函数能让我们像渲染常规组件一样处理动态引入的组件。

///before
import OtherComponent from './OtherComponent';
///after
const OtherComponent = React.lazy(() => import('./OtherComponent'));

此代码将会在组件首次渲染时，自动导入包含 OtherComponent 组件的包。React.lazy 接受一个函数，这个函数需要动态调用 import()。它必须返回一个 Promise，该 Promise 需要 resolve 一个 default export 的 React 组件。

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));

function MyComponent() {
  return (
    
      //fallback 属性接受任何在组件加载过程中你想展示的 React 元素
      正在加载...}>

React基础入门

JSX

Mozilla Developer Network

创建React应用

组件 & Props

函数组件与class组件

Hi , {props.value}

Hi , {this.props.value}

Props 的只读性

State&生命周期

当前时间：{this.state.date.toLocaleTimeString()}

时间更新次数：{this.state.counter}

It is {props.date.toLocaleTimeString()}.

事件处理

事件添加

向事件处理函数传参

条件渲染

元素变量

&&运算符

Messages: {count}

三目运算符

阻止组件渲染

列表&Key

用Key提取组件

组合&继承

Welcome

Welcome

代码分割

import()

React.lazy

Context

消耗多个context

错误边界

出错了

出错了

Refs

Refs回调

Refs转发

Fragment

高阶组件

高阶组件

注意事项

render props

移动鼠标!

类型检查

非受控组件

HOOK

useState

useEffect

多Effect

自定义HOOK

参考资料

你可能感兴趣的:(React基础入门)

`&&`运算符

列表&`Key`

用`Key`提取组件