react基础入门

1，了解react

react并不是一个MVC框架，他只是一个很强大的javaScript库，主要作用是用来构建UI界面。

react的核心是封装一个个大大小小的组件（小到一个按钮，大到一个页面）来构建复杂的UI界面，每个组件都是UI的一部分。

react的组件就是返回标签的javaScript函数。例如：

function MyButton() {   

        return ( <button>I'm a button</button> );   

}

2，react特点

• 速度快 - react使用虚拟DOM
• 跨浏览器兼容 - 因为虚拟DOM，提供了标准的API，解决了不同浏览器的语法不同问题
• 组件化 - 将每个模块都抽成组件，提升了可维护性
• 单向数据流 - 数据对应DOM树从上到下流动，数据流更清晰，组件的状态就更可控
• 纯粹的javaScript语法 - 没有react的单独语法，因此在react中，一些皆js

3，react组件

3.1 了解组件

从以上概念可知，react组件就是一部分的js逻辑，封装的独立的可复用的代码片段，这样每个片段都可以进行独立的管理，很好的实现了代码的复用。

注意：组件的首字母必须要大写

3.2 组件分类

函数（function）组件：

函数式组件其实就是官网的标准案例，定义一个函数，接受任意的props参数，函数中返回jsx语法的页面UI内容。

示例：

export default function MyApp() {  return (  <div>  <h1>Welcome to my app</h1>  <MyButton />  </div>  );  
}

类（class）组件：

通过声明ES6中的类（class）来定义一个React组件。其中，必须要继承React.Component类或React.PureComponent类；类中必须要定义一个名为render的函数，该函数的返回值是JSX语法编写的React元素。

class组件不同于函数组件的是，class组件会创建对应的实例，因此只有class组件才有生命周期

注意：

• 类的内部默认会有个props属性（继承自Component），可以直接使用
• 在类的构造函数（constructor）中通过this.props访问属性值是获取不到的，因为这时props还没有挂载到this.props上，等到constructor执行完成之后才会挂载（除非把外面传进来的props传递给constructor中的父类构造函数super从而实现this.props的挂载）
• 类组件是动态组件，基于数据驱动视图渲染

示例：

// 创建一个类式组件
import React from 'react' ​
class Mycomponent extends React.Component {    constructor(props){        super(props)   }render(){        return(       <div>hello Mycomponent!</div>       )   } 
}
export default Mycomponent // 渲染到页面中的指定DOM
// ReactDOM.render(虚拟DOM，真实DOM)
ReactDOM.render(<MyComponent />, document.getElementById('test'))
let c = new MyComponent()

3.3 组件数据传递

如果想传递数据给子组件，可通过props方式：

（1）在引用组件的标签处通过 props属性名={属性值} 的方式来设置传入的props

（2）在子组件入参处通过解构的方式获取props

示例：

function MyApp() {// 传递给MyLabel组件两个props，info和heightreturn (<MyLabelinfo={{ name: '张三', id: '123' }}height={100}/>);
}// MyLabel组件，可以获取传入的props
function MyLabel({info, height}) {// ... ...
}

4，了解JSX语法

概念：JSX（JavaScript XML）首先被应用在react中，他是一种javaScript语法的扩展，比较类似于模板语言。他最终产生的是js对象，既不是字符串（不要加引号）也不是html/xml标签。

作用：用来简化创建虚拟DOM，使代码更简洁，更容易维护。

需要注意的规则：

• 标签首字母小写，则会被转换成html的同名元素，如果html没有这个元素，就报错
• 标签首字母大写，则react就会渲染对应的组件，如果没有定义该组件，就报错
• 标签属性没有引号，通常使用大扩号{}，表示大括号内可以使用js表达式

        （eg：const myId = "123"; <h1 id={myId}>Hello,</h1>）

• 内联样式style={{key:value}}有两个大括号，第一个括号表示里面是一个js表达式，第二个括号表示里面是一个键值对（eg：<span style={{color:'#e0e0e0', fontSize:18}}>内容</span>）
• 虚拟DOM只能有一个根标签
• 属性使用小驼峰形式写法（eg：font-size写成fontSize）
• 必须闭合标签
• 与js的对象不同，js对象放在不同的地方创建是不同的引用，并不恒等于。但是只要JSX的返回值一样，就是相等。

参考：JSX基本语法规则

HTML转换JSX的辅助工具：HTML to JSX

5，条件渲染

在React使用的JSX语法中，同样支持与js相同的条件渲染if else、三目运算? :、&&语法等。

其中&&运算符的使用及其注意事项：

&&运算符作用是：左侧为true时，渲染右侧JSX，否则不渲染。

其中左侧不能是数字，只能是布尔值。例如假设count为数字，表达式要写count > 0 && <span>而不能写count && <span>

6，列表渲染

在React使用的JSX语法中，列表渲染通常是使用map方法遍历和filter方法过滤。

map()方法使用注意：

直接放在 map() 方法里的 JSX 元素一般都需要指定全局唯一的key值。目的为了让react能够精准定位到每个元素，同时其后续发生了变化可以高效准确的更新DOM树。
所以不要设置index索引，不要设置random随机数，因为随机数会导致每次重新渲染都会重新创建DOM。

7，更新界面useState和HOOK

useState使用：

（1）引入useState：import { useState } from 'react';

（2）自定义state变量和set方法：const [sth, setSth] = useState(initialValue)

（3）使用：通过sth直接取值，通过setSth(value)更新值

HOOK理解：

以useXXX开头的函数被称为HOOK，React内置了很多的HOOK供用户使用，useState就是其中一种。其他的还有useContext（读取和订阅组件中的context）、useRef（帮助引用一个不需要渲染的值）等。具体可查看官方API

同时React支持自定义HOOK。

HOOK的调用说明：

HOOK的要求比较严格，必须在组件顶层调用，如果想在一个循环或者条件逻辑中调用，只能再抽一个子组件放在顶层调用。

8，ref的使用

ref概念：组件内的标签可以定义ref属性来标识自己。

ref的应用：
（1）字符串（已废弃）：最早的用法。就是和vue的ref一样，使用ref在节点上定义后，通过this.refs[refName]来引用真实的dom节点。

<input ref="inputRef" /> // this.refs['inputRef']来访问

（2）回调形式的ref：就是在dom节点或组件上挂载函数，函数的入参是dom节点或组件实例，达到的效果和字符串一致，获取当前节点的引用。

<input ref={(input)=>{this.inputValue = input}} type="text"/>

（3）通过React.createRef()方法：createRef()方法创建一个ref容器，将其赋值给一个变量。

class Child extends React.Component{constructor(props){super(props);this.myRef = React.createRef(); // 创建ref容器，并赋值给myRef}componentDidMount(){console.log(this.myRef.current);}render(){// dom的ref参数引用myRef的值return <input ref={this.myRef}/>}
}

9，开发者工具react-devtools

开发阶段的辅助工具，更方便的查看react组件，可以在浏览器的F12中辅助使用。

可参考官网使用npm安装，也可以参考此教程使用

10，更多

开源的组件库：

Ant Design - 一套企业级 UI 设计语言和 React 组件库基于 Ant Design 设计体系的 React UI 组件库，用于研发企业级中后台产品。https://ant.design/index-cn

开发框架：

Next.js - React 应用开发框架 | Next.js中文网Next.js 支持规模化的生产级 React 应用程序。大量世界领先的公司都在使用 Next.js 来构建静态和动态网站及 web 应用。https://www.nextjs.cn/

官网详细文档：

快速入门 – React 中文文档https://react.docschina.org/learn