网站建设 sql爱链在线
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 函数可以写业务逻辑了。
类组件主要做复杂的业务逻辑的。