JSX语法、事件绑定与列表渲染

1.JSX函数与render函数

class App extends Component {
    const hello="hello jsx";	
	render() {
	    return (
           

              
Todos
              
running
              
{hello}
           
	)}}

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

中。

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

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

{this.handleKeyUp.bind(this)}

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

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

   
React

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

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

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

   
React

2.组件化

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

自定义组件大写 

3.事件绑定

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

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

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

 

    {arr.map((item, index) => {
           return 
          }
      )
  }