React JSX语法学习

React中JSX语法学习

Posted by wang chong on March 23, 2019

JSX语法的介绍

JSX(JavaScript XML) 是基于ECMAScript的一种新特性一种定义带属性树结构的语法。它不是XML或者HTML的一种限制,可以说是对它们的一种。

官网

JSX语法的书写方式

JSX语法有两种书写方式:一种是ES5的书写方式(现在不适用,还是要记一下吧,以免以后忘了),一种是ES6的书写方式。

ES5的方式

ES5使用React.crateClass的方式来构建组件。

var Hello = React.createClass({
    render : function(){
        return <h1> {this.props.name}</h1>
    }
})
ES6的方式

ES6采用新版本的Class来构建组件

"use strict";
class Hello extends React.Component{
    render(){
        return <h1>Hello</h1>
    }
}

上面了两种方式生成出来的叫组件,对应的Hello叫做组件名,简单理解就是HTML标签。但是要怎么注册这两个组件呢?上面两种方式的注册组件的方式相同。

ReactDOM.render(
    <Hello name="wang" />,
    document.getElementById('app')
)

使用ReactDOM.render把我们的组件传进去,然后再传一个DOM节点,相当于把组件里面的东西渲染到id为app的DOM元素里面。

这里传进去了name属性,在组件里面通过使用this.props.name获取。this.props相当于attribute。用于获取书写在组件标签中的属性。

DOM diff

DOM diff是DOM比较算法。用于找到最小变化的DOM元素进行渲染,平行化比较,把重绘和重排做到最小化。

React初探及环境搭建中有提到,react中View层的变化是基于state的,如果状态发生变化,组件中render函数就会重新执行。

DOM diff算法流程

  1. 开始判断节点是否相同,如果节点不相同,就相当于修改了节点,React会重新创建一个节点;
  2. 如果节点相同,判断是否是自定义节点;
  3. 如果不是自定义节点(ReactDOM.render也可以渲染html标签),比较属性是否发生变化,如果属性变更新属性然后结束;
  4. 如果是自定义节点,或者说是我们自己写的组件,然后重新渲染,会渲染出一段VirtualDOM(虚拟DOM),然后和以存在的Virtual DOM进行比较区别,最终渲染到页面。

JSX注意事项

  1. React的JSX里约定分别使用首字母大、小写来区分本地组件的类和HTML标签。并使用驼峰命令。

    自定义组件:List,HTML标签:html、htmlMessage

  2. 要使用JavaScript表达式作为属性值,只需要把这个表达式用一对大括号({})包起来,如果直接写值是需要用包起来。不需要用引号(“”)

    如果需要写多行就需要写在()里面,多行书写JSX语法,只能有一个跟标签。 例如:

     return(<div>
              <span></span>  
            </div>)
    
  3. htmlFor和className

    在html中label使用for属性、JSX中使用htmlFor,html中css类使用class,JSX中使用className

  4. CSS in JS (React style)

    JSX允许在js中书写css,相当于js中的一个对象

     const style = {
         color:'red',
         fontSize : 38,
     }
     <div style={style}> <div/>
    
  5. JSX里需要加注释很容易,他们只是js表达式而已。只需要在一个标签的子节点内(非最外层)小心的用{}包围要注释的范围,在JSX中写注释和平常是有一些区别。

    {/* 注释内容*/}

  6. 事件绑定

         handleChange(e){
             console.log(e.target)
         }
         render(){
             return (<input onClick = {this.handleChange.bind(this)}/>)  //需要改变this    
         }
            
    

非DOM属性的介绍

dangerouslySetInnerHTML警告

dangerouslySetInnerHTML用于净化数据,预防XSS的攻击

var rawHTML = {
    //通过__html来构造出来,
    __html : "<h2>非dom属性:dangerouslySetInnerHTML标签</h2>"
}
ReactDOM.render(
    //通过dangerouslySetInnerHTML属性来定义
    <div dangerouslySetInnerHTML = {rawHTML}></div>,
    document.getElementById("app")
)

ref

如果在JSX中获取真正的DOM元素,可以使用ref这个属性。

在html元素中添加ref属性

<input type="text" ref= 'input'/>

如果想要取得这个DOM元素可以通过ReactDOM.findDOMNode()来获取,并且需要在React生命周期的componentDidMount阶段

ReactDOM.findDOMNode(this.refs.input)   //获取到input元素

key提高渲染的性能

当在列表渲染的时候,如果不加k的情况下,会把所有的dom全部都干掉,然后在最后插如一个节点,如果加上了k,则会在下一次去更新节点的时候把li一一对应上,可以达到最小化的更新。

不加k的情况下 加k的情况下