JSX语法、事件绑定与列表渲染_jsx语法input 怎么绑定值-优快云博客

本文链接：https://blog.youkuaiyun.com/wenb1bai/article/details/81150264

本文详细介绍了React中的JSX语法，包括JSX的使用规则、如何在JSX中插入JavaScript表达式，以及JSX的编译过程。接着，讨论了组件化的概念，强调自定义组件在保持代码内聚和低耦合方面的重要性。此外，还探讨了React事件绑定，如onKeyUp和onClick，并解释了bind(this)的作用。最后，阐述了在处理列表渲染时，如何利用render函数结合key值实现高性能的DOM复用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.JSX函数与render函数

class App extends Component {
    const hello="hello jsx";	
	render() {
	    return (
           <div className="app">
              <h1>Todos</h1>
              <h2>running</h2>
              <h2>{hello}</h2>
           </div>
	)}}

上面代码就是JSX语法，由render作为它的入口函数，并且最外围的容器是唯一的。在15.x版本以下render函数只能包含一个容器。其他所有的结构都放在<div>中。

在JSX中访问变量，需要加大括号，如访问hello变量。

在JSX中插入JavaScript表达式也一样，直接在JSX中将JS表达式用大括号括起来即可

{this.handleKeyUp.bind(this)}

JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。

JSX的编译过程：有如下JSX语法

<div className="app">
   <h1>React</h1>
</div>

通过Bable编译成原生JS代码（React支持原生写法）

React.createElement(
    "div",{
       className:"app"
     },
     React.createElement(
     "h1",
     null,
     "React"
    )
);

此时的JS代码还没插入DOM中，没有放到页面上展示出来，通过ReactDOM.render（这里的render与入口函数无关，它是ReactDOM包上带的一个render方法）插入到HTML里生成DOM树。

<div class="app">
   <h1>React</h1>
</div>

2.组件化

封装组件的作用更内聚，低耦合

自定义组件大写 <Input />

3.事件绑定

<input onKeyUp={this.handleKeyUp.bind(this)} />

onKeyUp,onClick是属性,React将很多事件都封装了。

处理React事件时必须加上bind(this). bind的作用是改变函数作用域，让this指向传入的对象。

4.在处理数组的时候，通常会用render函数，反复触发调用，将数据循环输出。当render的时候，利用key值可以高性能的复用已经存在的DOM,而不是自己再去创建。

 <div className="list">
    {arr.map((item, index) => {
           return <Item item={item} key={index}/>
          }
      )
  }
 </div>