如何使用React

一、 什么是 React

React是一个简单的javascriptUI库，用于构建高效、快速的用户界面。它是一个轻量级库，因此很受欢迎。它遵循组件设计模式、声明式编程范式和函数式编程概念，以使前端应用程序更高效。它使用虚拟DOM来有效地操作DOM。它遵循从高阶组件到低阶组件的单向数据流。

什么是声明式编程
声明式编程是一种编程范式，它关注的是你要做什么，而不是如何做。它表达逻辑而不显式地定义步骤。这意味着我们需要根据逻辑的计算来声明要显示的组件。它没有描述控制流步骤。声明式编程的例子有HTML、SQL等

什么是函数式编程

函数式编程是声明式编程的一部分。javascript中的函数是第一类公民，这意味着函数是数据，你可以像保存变量一样在应用程序中保存、检索和传递这些函数。

函数式编程有些核心的概念，如下：

• 不可变性(Immutability)
• 纯函数(Pure Functions)
• 数据转换(Data Transformations)
• 高阶函数 (Higher-Order Functions)
• 递归
• 组合

二、 React创建与安装

1. 安装脚手架

npm i create-react-app -g

2. 创建一个名为myreact项目

create-react-app myreact

3.进入项目目录

cd /myreact

4.启动服务

npm start  启动项目
npm run eject  暴露webpack配置文件
npm run build 打包项目

三、jsx语法

JavaScript + xml 的结合体，可以理解为 html + js
jsx-transform 可以把jsx语法转为js语法

语法特点

• 单个根元素
• 单标签一定要闭合
• img标签必须添加alt属性
• class需要写成className
• 注释使用使用 {/* */}
• 数组可以直接写html标签
• 对象样式自动展开
• {}里写javascript

四、React组件

组件的定义可分为2种

• 函数声明组件
• 类声明组件

1 . 函数组件

• 函数就是组件
• 组件名称规定首字母大写,小写认为是一个标签元素
• 函数式组件中没有state
• 函数式组件中没有生命周期

  function App {
   return (<></>)
}
export default App;

2 .类组件

• 类组件在渲染时会默认调用render方法
• 类组件内有状态和钩子函数
• 需要继承React.Component
• React.Component 是一个基类，有生命周期，更改状态的方法
• 继承React.Component 之后才算是一个React类。

import React,{Component} from 'react'

export default class App extends Component{
    render(){
        return(<></>)
    }
}

五、React模板语法

文本渲染

• 文本渲染使用{ }
• html文本渲染使用dangerouslySetInnerHTML={{__html:xxx}}

条件渲染

• 三元运算符 condition ? true_cond : false_cond
• if 语句
• 逻辑 ‘&&’ 操作符

列表渲染

• 使用的map（）进行列表的渲染 this.state.list.map(item=><h3 key={item}>{item}</h3>)

六、React事件写法

• onClick={this.sayHi}
• onClick={()=>{this.sayHi(参数)}}
• onClick={this.sayHi.bind(this,参数)}

七、更新状态State

1.当参数为对象时

this.setState({count: this.state.count+1});

2，当参数为函数时，它接受两个参数：当前组件的状态和属性，并返回新的状态

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