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中组件
函数组件
类组件
组件的书写格式遵循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 函数可以写业务逻辑了。
类组件主要做复杂的业务逻辑的。