React学习笔记—JSX

小俞

深入JSX

JSX可以看作JavaScript的拓展,看起来有点像XML。使用React,可以进行JSX语法到JavaScript的转换。

Why JSX?

使用React,不一定非要使用JSX语法,可以使用原生的JS进行开发。但是React作者强烈建议我们使用JSX,因为JSX在定义类似HTML这种树形结构时,十分的简单明了。简明的代码结构更利于开发和维护。
XML有着开闭标签,在构建复杂的树形结构时,比函数调用和对象字面量更易读。看个直接的对比:

#使用JSX
React.render(
    <div>
        <div>
            <div>content</div>
        </div>
    </div>,
    document.getElementById('example')
);

#不使用JSX
React.render(
    React.createElement('div', null,
        React.createElement('div', null,
            React.createElement('div', null, 'content')
        )
    ),
    document.getElementById('example')
);

JSX并不是新语言,也没有改变JavaScript的语法,只是对JavaScript的拓展。

HTML 标签 vs. React 组件

React.render方法可以渲染HTML结构,也可以渲染React组件。
渲染HTML标签,声明变量采用首字母小写

var myDivElement = <div className="foo" />;
React.render(myDivElement, document.body);

渲染React组件,声明变量采用首字母大写

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
React.render(myElement, document.body);

通过变量的声明,来区分HTML标签和React组件,这个可以看作一个约定吧。

注意:标签的属性class和for,需要写成className和htmlFor。因为两个属性是JavaScript的保留字和关键字。无论你是否使用JSX。

#使用JSX
React.render(
    <label className="xxx" htmlFor="input">content</label>,
    document.getElementById('example')
);

#不使用JSX
React.render(
    React.createElement('label', {className: 'xxx', htmlFor: 'input'}, 'content'),
    document.getElementById('example')
);

转化

React JSX将类似XML的语法转化到原生的JavaScript,元素的标签、属性和子元素都会被当作参数传给React.createElement函数:

#JSX
var Nav;
var app = <Nav color="blue" />;

#native JS
var Nav;
var app = React.createElement(Nav, {color:"blue"});

JS表达式

表达式用{}包起来,不要加引号,加引号就会被当成字符串。

JSX是HTML和JavaScript混写的语法,当遇到<,JSX就当HTML解析,遇到{就当JavaScript解析。

属性表达式

React.render(
    <div className={2 > 1 ? 'class-a' : 'class-b'}>content</div>,
    document.body
);

子表达式

var Nav = React.createClass({
    render: function () {
        return <div>nav</div>
    }
});

React.render(
    <div>
        {2 > 1 ? <Nav/> : <div>div</div>}
    </div>,
    document.body
);

注释

同JavaScript注释一样

  • 单行注释 // comments
  • 多行注释 /* comments */

JSX延伸属性

不要改变props

如果提前就知道了组件的属性的话,写起来很容易。例如component组件有两个动态的属性foo和bar:

var component = <Component foo={x} bar={y} />;

而实际上,有些属性可能是后续添加的,我们没办法一开始就确定,我们可能会写出下面不好的代码:

var component = <Component />;
component.props.foo = x; // bad
component.props.bar = y; // also bad

这样写是错误的,因为我们手动直接添加的属性React后续没办法检查到属性类型错误,也就是说,当我们手动添加的属性发生类型错误时,在控制台是看不到错误信息的。

在React的设定中,初始化完props后,props是不可变的。改变props会引起无法想象的后果。

延伸属性

为了解决这个问题,React引入了属性延伸

var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;

当需要拓展我们的属性的时候,定义个一个属性对象,并通过{...props}的方式引入,React会帮我们拷贝到组件的props属性中。重要的是—这个过程是由React操控的,不是手动添赋值的属性。

需要覆盖的时候可以这样写:

var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;

JSX 陷阱

style属性

在React中写行内样式时,要这样写,不能采用引号的书写方式

React.render(
    <div style={{color:'red'}}>
        xxxxx
    </div>,
    document.body
);

HTML转义

比如我们有一些内容是用户输入的富文本,从后台取到数据后展示在页面上,希望展示相应的样式

var content='<strong>content</strong>';

React.render(
    <div>{content}</div>,
    document.body
);

结果页面直接输出内容了:

图片描述

React默认会进行HTML的转义,避免XSS攻击,如果要不转义,可以这么写:

var content='<strong>content</strong>';    

React.render(
    <div dangerouslySetInnerHTML={{__html: content}}></div>,
    document.body
);

页面效果:

图片描述

自定义HTML属性

如果在编写React过程中使用了自定义属性,React不会渲染的

React.render(
    <div dd='xxx'>content</div>,
    document.body
);

图片描述

要想使用得这么写:

React.render(
    <div data-dd='xxx' aria-dd='xxx'>content</div>,
    document.body
);

图片描述

阅读 46.2k

学习笔记
自我学习总结

对技术不懈追求

8.3k 声望
361 粉丝
0 条评论

对技术不懈追求

8.3k 声望
361 粉丝
文章目录
宣传栏