React（二）：JSX语法解析+综合案例

事件绑定

this绑定方式

问题：在事件执行后，需获取当前类的对象中相关属性，此时需要this——当打印时，发现this为undefined,这又是为啥？

假设有一个btnClick函数，但它并不是我们主动调用的，而是当button发生改变时，React内部调用→内部调用时，并不知道要如何绑定正确的this

解决办法：

bind给btnClick显示绑定this
使用 ES6 class fields 语法
事件监听时传入箭头函数（较为推荐）

<body>
  <div id="root"></div>

  <script src="../lib/react.js"></script>
  <script src="../lib/react-dom.js"></script>
  <script src="../lib/babel.js"></script>

  <script type="text/babel">
    /* 
    this的四种绑定规则 
     1.默认绑定：独立执行foo()
     2.隐式绑定：被一个对象执行obj.foo() ->obj
     3.显示绑定：call/apply/bind  foo.call('aaa') ->String('aaa')
     4.new绑定：new Foo() -> 创建一个新对象，并赋值给this
    */
    //1.创建root
    const root = ReactDOM.createRoot(document.getElementById('root'))

    //2..定义App根组件
    class App extends React.Component {
      constructor() {
        super()

        this.state = {
          count:100
        }
      }

      btn1Click() {
        this.setState({ 
          count:this.state.count+1
        })
      }

      // 箭头函数无this,只能去上一层找
      btn2Click = () => {
        this.setState({ 
          count:this.state.count-1
        })
      }

      btn3Click() {
        this.setState({ 
          count:this.state.count-1
        })
      }

      render(){
        const {count} = this.state
        return (
          <div>
            <h1>{ count }</h1>
            {/* 1.this绑定方式一：bind绑定 */}
            <button onClick={this.btn1Click.bind(this)}>按钮1</button>

            {/* 2.this绑定方式二：箭头函数ES6 class fields */}
            <button onClick={this.btn2Click}>按钮2</button>

            {/* 3.this绑定方式三：直接传入一个箭头函数 */}
            <button onClick={() => this.btn3Click()}>按钮3</button>
          </div>
        )
      }
    }

    // 3.将App组件渲染到root上
    root.render(<App />)
  </script>
</body>

事件参数传递

1.获取默认参数：即event对象

2.获取更多参数：可通过传入一个箭头函数，主动执行的事件函数，并且传入相关的其他参数

<body>
  <div id="root"></div>

  <script src="../lib/react.js"></script>
  <script src="../lib/react-dom.js"></script>
  <script src="../lib/babel.js"></script>

  <script type="text/babel">
    //1.创建root
    const root = ReactDOM.createRoot(document.getElementById('root'))

    //2..定义App根组件
    class App extends React.Component {
      constructor() {
        super()

        this.state = {
          message:"Hello World"
        }
      }

      btnClick (event,name,age) {
        console.log("点击事件", event,this);
        console.log("name:", name, "age:",age);
      }

      render(){
        const {message} = this.state
        return (
          <div>
            {/* 1.event参数的传递 */}
            <button onClick={this.btnClick}>按钮1</button>
            <button onClick={(event) => this.btnClick(event)}>按钮2</button>

            {/* 2.传递额外的参数 */}
            <button onClick={(event) => this.btnClick(event, "why", 30)}>按钮3</button>
          </div>
        )
      }
    }

    // 3.将App组件渲染到root上
    root.render(<App />)
  </script>
</body>

条件渲染

在vue中，我们会通过指令来控制：比如v-if、v-show；

在React中，所有的条件判断都和普通的JavaScript代码一致；

常见条件渲染方式：

1.条件判断语句

2.三元运算符

3.与运算符&&

<body>
  <div id="root"></div>

  <script src="../lib/react.js"></script>
  <script src="../lib/react-dom.js"></script>
  <script src="../lib/babel.js"></script>

  <script type="text/babel">
    //1.创建root
    const root = ReactDOM.createRoot(document.getElementById('root'))

    //2..定义App根组件
    class App extends React.Component {
      constructor() {
        super()

        this.state = {
          isReady:true,

          friend:{
            name:"lucy",
            age:22,
            gender:"女"
          }
        }
      }

      render(){
        const {isReady,friend} = this.state
        // 1.条件判断方式一：使用if进行条件判断
        let showElement = null
        if(isReady) {
          showElement = <h2>准备开始比赛吧</h2>
        }else{
          showElement = <h1>我还没有准备好嘞</h1>
        }
        return (
          <div>
            {/* 方式一：根据条件给变量赋值不同的内容 */}
            <div>{ showElement }</div>

            {/* 方式二：三元运算符 */}
            <div>{isReady? <button>准备开始</button> : <button>还没有准备好</button> }</div>

            {/* 方式三：&&运算符 */}
            {/* 场景：当某一个值，有可能为undefined时，使用&&进行条件判断 */}
            <div>{ friend && <div>{friend.name + friend.age + friend.gender}</div> }</div>
          </div>
        )
      }
    }

    // 3.将App组件渲染到root上
    root.render(<App />)
  </script>
</body>

实现v-show的效果：

class App extends React.Component {
  constructor() {
    super()

    this.state = {
      message:"Hello World",
      isShow:true
    }
  }

  ediClick() {
    this.setState({
      isShow:!this.state.isShow
    })
  }
  render(){
    const {message,isShow} = this.state
    return (
      <div>
        <button onClick={this.ediClick.bind(this)}>切换1</button>
        <h1 >{ isShow? message : "" }</h1>

        {/* v-show的效果 */}
        <button onClick={this.ediClick.bind(this)}>切换2</button>
        <h1 style={{display:isShow ? "block" : "none"}}>{ message }</h1>
      </div>
    )
  }
}

列表渲染

class App extends React.Component {
  constructor() {
    super()

    this.state = {
      students:[
        {id:1, name:'Jack', age:18},
        {id:2, name:'Tom', age:20},
        {id:3, name:'Lucy', age:22},
        {id:4, name:'Lily', age:24}
      ]
    }
  }

  render(){
    const {students} = this.state

    // 展示年龄大于20的
    const filterStudents = students.filter(item => item.age >= 20)
    return (
      <div>
        <h2>学生信息列表</h2>
        <div className="list">
          {/* 绑定唯一标识key:提高diff算法时的效率 */}
          {filterStudents.map(item => 
            <div key={item.id} className="item">
              <p>id:{item.id}</p>
              <p>姓名：{item.name}</p>
              <p>年龄：{item.age}</p>
            </div>
          )}
        </div>
      </div>
    )
  }
}

原理本质

babel转换

实际上，jsx 仅仅只是 React.createElement(component, props, ...children) 函数的语法糖→所有的jsx最终都会被转换成React.createElement的函数调用

createElement需要传递三个参数：

1.参数一：type

当前ReactElement的类型；
如果是标签元素，那么就使用字符串表示 “div”；
如果是组件元素，那么就直接使用组件的名称；

2.参数二：config

所有jsx中的属性都在config中以对象的属性和值的形式存储；
比如传入className作为元素的class；

3.参数三：children

存放在标签中的内容，以children数组的方式进行存储；

直接编写jsx代码：

<div>
  <div className="header">header</div>
  <div className="Content">
    <div>Banner</div>
    <ul>
      <li>数据列表1</li>
      <li>数据列表2</li>
      <li>数据列表3</li>
    </ul>
  </div>
  <div className="footer">footer</div>
</div>

经过babel转译后：

React.createElement(
'div',
null,
React.createElement('div', { className: 'header' }, 'header'),
React.createElement(
  'div',
  { className: 'Content' },
  React.createElement('div', null, 'Banner'),
  React.createElement(
    'ul',
    null,
    React.createElement('li', null, '数据列表1'),
    React.createElement('li', null, '数据列表2'),
    React.createElement('li', null, '数据列表3')
  )
),
React.createElement('div', { className: 'footer' }, 'footer')
);

虚拟DOM生成

通过React.createElement最终创建出一个ReactElement对象→它组成了一个JS对象树→即虚拟DOM

阶段案例-购物车

<body>
  
  <div id="root"></div>

  <script src="../lib/react.js"></script>
  <script src="../lib/react-dom.js"></script>
  <script src="../lib/babel.js"></script>

  <script src="./data.js"></script>
  <script src="./format.js"></script>

  <script type="text/babel">
    // 1.定义App根组件
    class App extends React.Component {
      constructor() {
        super()
        this.state = {
          books: books
        }
      }

      getTotalPrice() {
        const totalPrice = this.state.books.reduce((preValue, item) => {
          return preValue + item.count * item.price
        }, 0)
        return totalPrice
      }

      changeCount(index, count) {
        const newBooks = [...this.state.books]
        newBooks[index].count += count
        this.setState({ books: newBooks })
      }

      removeItem(index) {
        const newBooks = [...this.state.books]
        newBooks.splice(index, 1)
        this.setState({ books: newBooks })
      }

      renderBookList() {
        const { books } = this.state

        return <div>
          <table>
            <thead>
              <tr>
                <th>序号</th>
                <th>书籍名称</th>
                <th>出版日期</th>
                <th>价格</th>
                <th>购买数量</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              {
                books.map((item, index) => {
                  return (
                    <tr key={item.id}>
                      <td>{index + 1}</td>
                      <td>{item.name}</td>
                      <td>{item.date}</td>
                      <td>{formatPrice(item.price)}</td>
                      <td>
                        <button 
                          disabled={item.count <= 1}
                          onClick={() => this.changeCount(index, -1)}
                        >
                          -
                        </button>
                        {item.count}
                        <button onClick={() => this.changeCount(index, 1)}>+</button>
                      </td>
                      <td><button onClick={() => this.removeItem(index)}>删除</button></td>
                    </tr>
                  )
                })
              }
            </tbody>
          </table>
          <h2>总价格: {formatPrice(this.getTotalPrice())}</h2>
        </div>
      }

      renderBookEmpty() {
        return <div><h2>购物车为空, 请添加书籍~</h2></div>
      }

      render() {
        const { books } = this.state
        return books.length ? this.renderBookList(): this.renderBookEmpty()
      }
    }

    // 2.创建root并且渲染App组件
    const root = ReactDOM.createRoot(document.querySelector("#root"))
    root.render(<App/>)
  </script>

</body>

format.js(数值格式化文件）

function formatPrice(price) {
  return "¥" + Number(price).toFixed(2)
}

data.js(数据文件)

const books = [
  {
    id: 1,
    name: '《算法导论》',
    date: '2006-9',
    price: 85.00,
    count: 1
  },
  {
    id: 2,
    name: '《UNIX编程艺术》',
    date: '2006-2',
    price: 59.00,
    count: 1
  },
  {
    id: 3,
    name: '《编程珠玑》',
    date: '2008-10',
    price: 39.00,
    count: 1
  },
  {
    id: 4,
    name: '《代码大全》',
    date: '2006-3',
    price: 128.00,
    count: 1
  },
]