企业官网建设流程全解析

一、理解JSX

1、JSX是JavaScript XML，是一种语法，由Meta公司发布，浏览器是不支持这种语法的

2、在编写React组件视图结构时，JSX是可选的
JSX语法：

function B(props) { return ( <div> <h1>你好</h1> </div> ) }

不用JSX语法，用React官方API：

function B() { return React.createElement('div', {}, React.createElement('h1', {}, '你好')) }

可以使用React.createElement('tag', {}, [])编写视图结构，组件是一定要有视图结构的

3、JSX语法最终会被@babel/preset-react进行编译，编译的结果就是React.createElement()这种语法

4、要随时有能力把JSX语法转换成React.createElement()语法，反之亦然

5、什么是JSX元素：React.createElement()的结果，是变量，也是对象，并且是不可变对象
例子：React.createElement('div', {}, '你好') 等价于 <div>你好</div>

const element1 = <div>你好</div> console.log('---element1', element1) const element2 = React.createElement('div', {}, '你好') console.log('---element2', element2)

控制台打印：

可以看到element1和element2都是react.transitional.element类型

6、为什么JSX元素要设计成不可变对象
因为JSX元组最终会被渲染成真实DOM，所以不能直接操作“原材料”。要改变只能采用声明式操作

7、元素和组件的区别
组件是由class或function定义的东西，叫组件
元素是由JSX语法或React.createElement()返回的结果叫做元素
组件实例化了就是元素

二、JSX语法细节

1、在JSX中可以嵌套表达式，使用{}来嵌套
在JSX视图中，凡是动态的变量（表达式）都使用{}包起来

const hello = '你好' const title = '标题' function B() { return ( <div title={ title }> <h1>{ hello }</h1> </div> ) }

2、当JSX定义视图比较复杂时，建议换行，像HTML那样对齐，换行后建议用()把JSX元素整体包裹起来

const ele = ( <div> <h1>你好</h1> </div> )

3、JSX写法是变量，也是表达式，所以JSX元素可以作为函数的入参，也可以作为函数的返回值，还可以用在if/for循环中

function handle (arg) { if (arg) { return <div>{arg}</div> } else { return <div>你好</div> } }

调用：

handle('你好') handle(100) handle(<span>大家好</span>)

如果arg是个JSX，能不能在{}内对它做操作，<div>{arg + 1}</div>？
回答：不能，arg是JSX不要做操作，直接渲染就行了

4、JSX语法有三个HTML属性发生了变化：
（1）className代替class，因为JSX中class是关键字
（2）tabIndex代替tabindex，因为JSX使用小驼峰命名法
（3）htmlFor代替for，因为和for循环的for重复

5、JSX语法中有三个新增的属性
（1）key，用于列表渲染
（2）ref，快捷的DOM访问方式
（3）dangerouslySetInnerHTML，用于渲染一段HTML片段
举例：
我们写了一个变量content，React默认是字符串，不会解析标签，就按照字符串显示

const hello = '你好' const title = '标题' function B() { return ( <div title={ title }> <h1>{ hello }</h1> <div>{ content }</div> </div> ) } const content = '<div><a href="https://www.baidu.com">跳转</a></div>' export default B

使用dangerouslySetInnerHTML属性：

const hello = '你好' const title = '标题' function B() { return ( <div title={ title }> <h1>{ hello }</h1> <div dangerouslySetInnerHTML={{ __html: content }}></div> </div> ) } const content = '<div><a href="https://www.baidu.com">跳转</a></div>' export default B

React写进{}内的东西，不允许被当作代码块解析，是为了防止xss攻击和代码注入