构建学习环境

  1. 文件使用.jsx后缀
    • index.jsx

  2. 安装 vite

    1. npm install vite
    2. # 或者
    3. yarn add vite
    1. <html>
    2. <script src="index.jsx" type="module"></script>
    3. </html>
    1. // 启动vite
    2. vite

    JSX

    1. const rEl = <h1>This is my first JSX experience</h1>

    JSX 到底是什么？

  3. 一种标签语法，对 JS 进行语法扩展

  4. 不是字符串，不是 HTML 标签
  5. 描述 UI 呈现与交互的直观的表现形式
    • 仿 HTML

  6. 生成 React 元素

    createElement 与 JSX 对比

    1. const rEl = React.createElement('h1', {
    2. className:'title'
    3. }, 'This is my first JSX experience');
    1. const rEl = <h1 className='title'>This is my first JSX experience</h1>

    把上一个节用 React.createElement 案例改写为 JSX

    React深入认识 ```jsx class MyButton extends React.Component { constructor(props){ super(props);

    this.state = { openStatus: false } }

    statusChange(){ this.setState({ openStatus: !this.state.openStatus }); }

    render() { // JSX 遵循JS的命名规范，一般使用camelCase小驼峰 // class => className tabindex => tabIndex return (

    1.  <div className="wrapper">
    2.  <p className="text">
    3.    { /* 插值表达式 */ 
    4.        this.state.openStatus ? '打开状态' : '关闭状态'；
    5.    }
    6.  </p>
    7.  <button
    8.    onClick={this.statusChange.bind(this)}
    9.  >
    10.    {this.state.openStatus ? '关闭' : '打开'}        
    11.  </button>

    ); } }

ReactDOM.render({ React.createElement(MyButton), docment.getElementById(‘app’); });

  1. <a name="SvZWv"></a>
  2. ## 为什么 React 不把视图标记和逻辑分开呢？
  4. 1. 渲染和 UI 标记是有逻辑耦合
  5.    - 为了更加直观地把UI和逻辑联系起来
  6. 2. 即使是这样的耦合，也能实现关注点分离
  7.    - 单独有render函数中返回 JSX 或 createElement
  8.       - 所以从某一个模块来看视图标记跟主逻辑分离的
  9.       - 令代码更加直观，以便更好地维护
  10. <a name="RAEUI"></a>
  11. ## JSX 插值表达式
  13. - 表达式
  14.    - 一切有效的（符合JS编程逻辑的）表达式 `{ title }`
  15. - JSX 被编译以后 -> React元素 -> 普通的对象
  16. ```jsx
  17. const rEl1 = <h1 className='title'>This is a title part.</h1>
  18. const rEl2 = React.createElement('h1', {
  19.     className: 'title'
  20. }, 'This is a title part.');
  21. console.log(rEl, rEl2);

image.png
JSX会编译成 React.createElement()，即 JSX 是 React.createElement() 的上一层（语法糖）
image.png

可以在插值表达式输入各种表达式内容

{} 中可以输入 函数执行，字符串等等

  1. var mark = 'title';
  2. function selectText(mark){
  3.     switch(mark){
  4.     case 'title':
  5.       return 'This is a title';
  6.     default:
  7.       return 'This is a paragraph';
  8.   }
  9. }
  10. function getText(mark){
  11.     if(mark === 'title'){
  12.       return (
  13.       <h1 className={ mark }>
  14.         { selectText(mark) }
  15.       </h1>
  16.     );
  18.     return <p>{ selectText(mark) }</p>;
  19.   }
  20. }
  1. var arr = [
  2.   {
  3.     id: 1,
  4.     name: '张三'
  5.   },
  6.   {
  7.     id: 2,
  8.     name: '李四'
  9.   },
  10.   {
  11.       id: 3,
  12.     name: '王五'
  13.   }
  14. ];
  16. function setList(){
  17.     return (
  18.       <ul>
  19.       {
  20.           arr.map(item => {
  21.             <li key={ item.id }>
  22.             <span>{ item.id }</span>
  23.             <p>{ item.name }</p>
  24.           </li>
  25.         });
  26.       }
  27.     </ul>
  28.   );
  29. }
  31. const rEl = setList();
  32. ReactDOM.render(rEl, document.getElementById('app'));

注意事项

  • 单标签必须要闭合

    1. const rEl = <img src="" />;
    • render 之前
      • 所有 JSX 内容都会转成字符串
      • 所有输入（插值）的内容都会进行转义
        • 以避免 XSS