react的基础使用

react中为什么使用jsx

---

React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI，以及需要在 UI 中展示准备好的数据。

react认为将业务代码和数据以及事件等等 需要和UI高度耦合。所以采用了jsx。

什么是jsx

---

jsx是javascript的语法扩展，类似模板写法格式（类似模板引擎）

JSX是一种JavaScript的语法扩展，首先运用于React中，其格式比较像是模版语言

特点：

React认为渲染逻辑本质上与其他UI逻辑内在耦合，比如，在UI中需要绑定处理事件、在某些时刻状态发生变化时需要通知到UI，以及需要在UI中展示准备好的数据。 [4]

JSX可以使用引号来定义以字符串为值的属性：

const element =

;

也可以使用大括号来定义以JavaScript表达式为值的属性：

const element =

;

因为JSX的特性更接近JavaScript而不是HTML，所以React DOM使用camelCase（小驼峰）命名来定义属性的名称，而不是使用HTML的属性名称。例如：class变成了className，而tableindex则对应着tableIndex

需要注意：  js+html 混合写法
属性命名：小驼峰
属性绑值：{}  直接赋值 ""
元素内容中写js代码：
<div>
{//代码
}
</div>
react组件中jsx写法格式：
function App() {let name = "小花";let cname = "active";return (<div className="App">测试<div className={cname}>{name}</div></div>);
}

jsx可以防止注入攻击：

function App() {let name = "小花";let cname = "active";//注入脚本let str="<input src='www.***.com'/>";return (<div className="App">测试<div className={cname}>{name}</div><div>{str}</div></div>);
}

react中组件

---

1. 函数组件

2. 类组件

组件的书写格式遵循es5  es6

函数组件：

function App() {//必带返回return <div className="App">测试</div>;
}let App = () => {return <div className="App">测试</div>;
};
在mainjs文件中引入app组件

该函数被执行 ，获取到的是编译之后的jsxDEV(‘div’,{className:’’})格式。

jsxDEV('div',{ className: "active" })
let ele=React.createElement("div", { className: "active" });
console.log(ele);

类组件写法：

import React from "react";
console.log(React.Component);
//es6 class  继承  react component class类
class App extends React.Component {constructor(props) {super(props);//执行父类的构造}//渲染函数render() {return <div>测试</div>;}
}export default App;
export default App;

函数组件和类组件的使用场景

---

函数组件主要用于UI界面的渲染   react  16.8以前
16.8版本之后react  hooks API  函数可以写业务逻辑了。
类组件主要做复杂的业务逻辑的。