第二节：jsx学习

jsx到底是什么？

它是一种 标签语法， JS进行的语法扩展

他不是字符串,也不是html标签

它是描述 UI呈现 与 交互 的直观形式

生成react元素 → 不用去 React.createElement了

jsx 和 React.createElement对比

// => JSX
const rEl = <h1 className="title">This is my first JSX experience</h1>

// => createElement的方式
const rEl = React.createElement(
  'h1',
  {
    className: 'title'
  },
  'This is my first JSX experience'
)

jsx → 书写方便,而且形式和html相似(推荐使用)

class MyButton extends React.Component{
  constructor(props) {
    super();
    // 状态
    this.state = {
      openStatus: false
    }
 
  }

  render() {
    return (
      <div className="wrapper">
        <p>{ this.state.openStatus ? '打开' : '关闭' }</p>
        <button onClick={() => this.setState({
          openStatus: !this.state.openStatus
        })}>{ this.state.openStatus ? '关闭 ->' : '<- 打开' }</button>
      </div>
    );
  }
}

ReactDOM.render(
  React.createElement(MyButton),
  document.getElementById('app')
)

jsx的命名规范

一般使用小驼峰 → 如：className、tableIndex

思考为什么React不把 视图标记 和 逻辑分开了？

让开发者更加直观，有利于维护和开发

jsx 插值表达式

表达式 → 一切有效的 (符合js编程逻辑的) 表达式 { title }

JSX → JSX编译后 → React元素 → 普通的对象

var mark = "title";

function selectText(mark) {
  switch(mark) {
    case 'title':
      return 'this is a title';
    default:
      return "this is paragraph"
  }
}

function getText(mark) {
  if(mark === 'title') {
    return <h1 className={ mark }>
      { selectText(mark) }
    </h1>
  }

  return <p>{ selectText(mark) }</p>
}

getText(mark)

var arr = [
  {id: 1, name: 'xw'},
  {id: 2, name: 'xy'},
  {id: 3, name: 'xu'},
  {id: 4, name: 'xr'},
];

function setList() {
  return (
    <ul>
      {
        arr.map((item, i) => {
          return (
            <li key={i}>
              <span>{ item.id }-</span>
              <span>{ item.name }</span>
            </li>
          )
        })
      }
    </ul>
  )
}

const rEl = setList();

ReactDOM.render(
  rEl,
  document.getElementById('app')
)

注意： jsx的变量一定是写在大括号里面的

书写规格

单标签必须要闭合 → 按照的是xml的书写的

render之前

所有的jsx都会转成字符串

所有的输入内容都会进行转义 → 避免了xss的攻击 → 虚拟DOM → 真实的DOM