react核心概念--JSX

什么是JSX

• Facebook起草的JS扩展语法
• 本质是一个JS对象，会被babel编译，最终会被转换为React.createElement
• 每个JSX表达式，有且仅有一个根节点 React.Fragment

const h1 = (<h1>Hello World <span>一个span元素</span></h1>)

会被编译成

const h1 = React.createElement("h1",
  {
     },
  'Hello World',
  React.createElement("span", {
     }, '一个span元素')
)

但是如果这么写，就有两个根节点，无法编译，因为React.createElement只能创建一个根节点

const h1 = (
    <h1>Hello World <span>span元素</span></h1>
    <p>asdfafdafd</p>
  )

如果你非要这么写，你可以在外面用

给他包裹起来，如果不想有真实的节点，那就<>这么写，总之，就是必须要有根节点
<>其实是语法糖，真实的样子是这样的

• 每个JSX元素必须结束（XML规范）
  
  

const img = (
  <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2962719555,3613138778&fm=27&gp=0.jpg" alt="" />
    // 
);

ReactDOM.render(img, document.getElementById('root'));

JSX可嵌入表达式

• 在JSX中使用注释
  {/* */}
• 将表达式作为内容的一部分

const a=1234,b=4321;
const div = (<div>{
     a}*{
     b}={
     a * b}</div>)
//const div = React.createElement('div', {}, `${a}*${b}=${a * b}`)
ReactDOM.render(div, document.getElementById('root'));

- null、undefined、false不会显示，0可以

const div = (
  <div>
    <p>`null`、`undefined`、`false`不会显示，`0`可以</p>
    <p>{
     null}</p>
    <p>{
     false}</p>
    <p>{
     undefined}</p>
    <p>{
     0}</p>
  </div>
)

- 普通对象，不可以作为子元素；可以放置React元素对象

const obj = {
     
  name: '张三',
  age: '18'
}
const div = (
  <div>{
     obj}</div>
)

• 将表达式作为元素属性；属性使用小驼峰命名法

const url = "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2962719555,3613138778&fm=27&gp=0.jpg";
const cls = "image";
const div = (
  <div>
    <img src={
     url} className={
     cls} style={
     {
     
      marginLeft: "50px",
      width: "200px"
    }} alt="" />
  </div>
);

ReactDOM.render(div, document.getElementById("root"));

• 防止注入攻击
  • 自动编码

const content = "
afasfasfd
阿斯顿法定发送
";
const div = (
  <div>{
     content}
  </div>
);

ReactDOM.render(div, document.getElementById("root"));

- dangerouslySetInnerHTML

const content = "
afasfasfd
阿斯顿法定发送
";
const div = (
    <div dangerouslySetInnerHTML={
     {
     
        __html: content
    }}>
    </div>
);

ReactDOM.render(div, document.getElementById("root"));

元素的不可变性

• 虽然JSX元素是一个对象，但是该对象中的所有属性不可更改 如果确实需要更改元素的属性，需要重新创建JSX元素

let num = 0;

const div = (
  <div>{
     num}
  </div>
);
console.log(div)
div.props.children = 1
ReactDOM.render(div, document.getElementById("root"));