react 初识记录（一）

​持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情

1、安装

（1）注意Node的版本要新一些，如果出现安装失败的话就尝试更换node版本

（2）安装命令：npx create-react-app my-app(这是官方推荐的命令)

全局安装：

npm i -g create-react-app
create-react-app my-app

2、概念

React是什么？

React是一个声明式，高效灵活用于构建用户界面的JavaScript库。使用React可以将一些简短、独立的代码片段组合成复杂的UI界面，统称为组件 （来自官方）

React的特点

1、声明式设计（采用声明范式，可以轻松描述应用）

2、高效（采用虚拟Dom，最大限度地减少与Dom的交互）

3、灵活（与已知的库或框架很好的配合）

4、JSX（JavaScript语法的扩展。）

5、组件（通过React构建组件，能提高代码的复用性，能够很好的应用在大项目开发中）

6、单向响应的数据流（能减少重复的代码）

3、React基础

（1）JSX

const say = 'Hello'
​
const element = <div>{say},React</div>

从上面的例子可以知道，声明的变量可以用大括号{}包裹，使其渲染在页面上

在JSX语法中，可以在大括号内放置任何有效的JavaScript表达式。例如加减乘除，obj.a或者Function(some)都是有效的JavaScript表达式。

例子：

function func(name){
  return name.a+' '+name.b
}
const name = {
   a: 'Handsome',
   b: 'Man'
}
const element = {
   <div>Come,{func(name)}</div>
}

在编译之后，JSX表达式会被转为普通JavaScript函数调用，并且对其取值后得到JavaScript对象

例如，可以在if语句和for循环的代码块中使用JSX,将JSX赋值给变量，把JSX当作参数传入，以及从函数中返回JSX

function func(name){
if(name){
   return <div>xxx</div>
}else{
  return <div>bbb</div>
}
}

JSX中指定属性

1、可以通过引号，来将属性值指定为字符串字面量：

const element = js<img src="xxxxxxxxxx"/>

2、也可以使用大括号，在属性值中插入一个JavaScript表达式

const element = js<img src={pic.img} />

tips:在属性中嵌入JavaScript表达式时，不要在大括号外面加上引号。

注意：

JSX语法上更接近JavaScript而不是HTML,所以React DOM使用小驼峰命名来定义属性的名称，而不使用HTML属性名称的命名约定。

例如： HTML的class在JSX变成了className,而tabindex则变为tabIndex

JSX指定子元素

如果一个标签里面没有内容，可以 />闭合标签，类似XML语法

JSX标签里能够包含很多子元素

const element = (
<div>
<div>1</div> <div>2</div>
</div>
)

JSX防止注入攻击

React DOM在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远不会注入那些非自己编写的内容。所有内容在渲染之前都会被转换为字符串。能有效防止XSS攻击

JSX表示对象

Babel会把JSX转译为React.createElement()函数调用

示例1：

const element = (
   <div className="xxx">
        Hello,HandsomeMan
   </div>
)

示例2：

const element = React.createElement(
'div', { className: 'xxx' },'Hello,HandsomeMan'
)

两种写法效果完全一致

React.createElement()会预先执行一些检查，确保代码无误，实际上它创建了如下的一个对象

const element = {
    type: 'div',
        props: {
            className: 'xxx',
            children: 'Hello,HandsomeMan'
}
}

这些对象被称为“React元素”。React通过读取这些对象，然后使用它们构建DOM以及保持随时更新

（2）元素渲染

元素是构成React应用的最小砖块

与浏览器的DOM元素不同，React元素是创建开销极小的普通对象。React DOM会负责更新DOM来与React元素保持一致

1、将一个元素渲染为DOM

假设HTML文件某处有一个

ReactDOM.createRoot()
const root = ReactDOM.createRoot(

document.getElementById('root')

)

const element = <div>2222</div>

root.render(element);

const root = ReactDOM.createRoot(
  document.getElementById('root')
)
function tick() {
   const element = (
     <div>
      <h1>计时器：{new Date().toLocaleTimeString()}</h1>
     </div>
)
root.render(element);
}
setInterval(tick,1000);

function Hi(props){
    return <div>Hi,{props.name}</div>
}

class Hi extends React.Component {
    render() {
        return <div>Hi,{this.props.name}</div>
    }
}

function sum(a,b){
   return a+b;
}