React学习总结（一）

文章目录

概述
JSX语法
元素渲染与组件
- 元素渲染
- 组件
- - 类组件
  - 函数组件

概述

经过这段时间的 React 学习，自己对这阶段的学习做了一个总结。

JSX语法

在React中使用JSX代替 js；JSX编写模板会更加方便快捷；在刚开始学习 React相关知识时，老是忘记在 script 中添加标签 type=""text/babel,导致代码运行报错；

简单的JSX语句

<script type="text/babel">const element = <h1>你好，{name}</h1>
</script>

JSX 语法中，大括号内可以放置任何有效的 JS 表达式

 function formatName(user) {return user.firstName + ' ' + user.lastName}function getUser(user) {if (user) {return <h1>你好，{formatName(user)}</h1>}return <h1>Hello Stranger</h1>}
const element = (<h1>你好，{formatName(user)}</h1>
)

JSX也是一个表达式也就是说，你可以在 if 语句和 for 循环的代码块中使用 JSX，将 JSX 赋值给变量，把 JSX 当作参数传入，以及从函数中返回 JSX；
JSX特定属性
- 可以通过使用引号，来将属性值指定为字符串字面量
```
const element = <div tabIndex="0"></div>
```
- 可以在大括号中使用有效的 js表达式，也能在里面调用函数
```
 const element = (<h1>你好，{formatName(user)}</h1>)
```

其他具体特性可参考React官网 https://react.docschina.org/docs/introducing-jsx.html

元素渲染与组件

元素渲染

在 html 代码中定义一个方式需要渲染元素的容器 --> 默认为一个id为root的div ，与 vue类似；然后利用 == ReactDOM.render== 方法；第一个参数为要渲染的内容，第二个参数为，要渲染的容器；

其渲染机制，就是利用 render构建dom树,如果state或者props发生变化
则其会使用diff算法来进行对比新老dom树，将其有变化的部分重新渲染，而不是在重新将整个页面渲染，提高了效率；

ReactDOM.render(<Commentdate={comment.date}text={comment.text}author={comment.author}/>,document.getElementById("root"))

组件

类组件

首先需要引入

import React, { Component } from 'react'

类组件模板

// rcc
import React, { Component } from 'react'export default class test extends Component {render() {return (<div>test</div>)}
}

函数组件

函数组件模板

// rfc
import React from 'react'
export default function test() {return (<div>test</div>)
}

大家可以用这两个代码模板作为自定义的代码块，从而提高自己开发效率，在这篇文章里就先简单的介绍这两种类型组件的写法，至于两者间的区别将会在后面的文章中提到；