React的简单介绍 JSX的语法学习
begin enjoy👇

一 React

React 用于构建用户界面的 JavaScript 库,React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。

react特点

  1. 声明式设计:React采用声明范式,可以轻松描述应用。
  2. 高效:React通过对DOM的模拟,最大限度地减少与DOM的交互。
  3. 灵活:React可以与已知的库或框架很好地配合。

react不同于vue的mvvm,react只负责视图层view层

第一个react应用

<div id="root"></div>
        
<!-- 引入react核心库 -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- babel用来解析 jsx语法 -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
    ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('root')
    );
</script>

JSX

JSX是一种JavaScript的语法扩展,运用于React架构中,其格式比较像是模版语言,但事实上完全是在JavaScript内部实现的。React使用JSX来描述用户界面。使用JSX语法可以让我们在 js编写类似HTML的标签

JSX语法编写的代码并不能直接在浏览器中运行需要经过 babel 进行编译才会被浏览器识别。

// JSX
let template = <h1>Hello, JSX!</h1>
ReactDOM.render(template, document.getElementById('root'));
  • jsx标签必须包含在根标签下,否则会报语法错误。

JSX 注释

在JSX中可以插入注释语句,语法{/* */}

let template = <div>
    {/* jsx 注释 */}
    <h1>标题</h1>
    <p>段落</p>    
</div>

JSX 插入js表达式

使用 花括号 {}可以在JSX插入JS表达式

let num =199;
let template = <div>
    <h1>标题</h1>
    <p>段落{num - 19}</p>    
</div>

JSX 变量类型

JSX 表达式中可以插入任意类型的变量。

  • JSX插入以下三种类型的值并不能直接渲染到DOM
    • Boolan
    • Null
    • undefined
  • 数组:插入的如果是数组类型那么,会自动展开所有数组成员。

JSX 表达式直接使用插入的数据是安全的

React DOM 在渲染之前默认会 过滤 所有传入的值会将所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS(跨站脚本) 攻击。

<!-- 接收用户输入 -->
<input type="text" class="userinput">
<div id="root"></div>
...

document.querySelector('.userinput').onchange = function (ev) { 
    let value =  ev.target.value
    let template = <div>
        {/* 直接将用户输入的数据插入到JSX表达式 */}
        <p>{value}</p>
    </div>

    ReactDOM.render(template, document.getElementById('root'));
}

JSX 属性

JSX 语法上更接近 JavaScript 而不是 HTML,所以 React DOM 使用 camelCase(小驼峰命名)来定义属性的名称,而不使用 HTML 属性名称的命名约定。

例如,JSX 里的 class 变成了 className,而 tabindex 则变为 tabIndex。

let template = <div>
    <p className='box'>白日依山尽</p>
</div>
  • 使用花括号 {} 为属性插入一个JS表达式
let tValue = '这是一个标题'

let template = <div>
    // 给属性插入一个js达式
    <h2 title={tValue}>标题</h2>
    <p className='box'>白日依山尽</p>
</div>

style 属性

在JSX中使用style来设置样式时,style的值必须是一个对象,各个样式属性作为key(驼峰命名),样式值为value

var myStyle = {color:"#ff0000",fontSize:40};
let template = <div>
    <p style={myStyle}>段落</p>
</div>

JSX 事件

JSX 支持所有的 HTML 元素的事件,但是有一点语法上的不同。

  • React 事件的命名采用小驼峰式(camelCase),而不是纯小写。
  • 使用 JSX 语法时你需要传入一个函数作为事件处理函数,而不是一个字符串。
function  fun1(ev) {
    console.log(ev)
}
let template = <div>
    {/* 事件名称必须使用小驼峰 */}
    <button onClick={fun1}>按钮1</button>
</div>

在 React 中另一个不同点是你不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault()

事件回调函数中传递数据

JSX 可以通过箭头函数的方式向事件回调函数中传递数据

function  fun1(...args) {
    console.log(args)
}
let template = <div>
    <button onClick={ev=> fun1(ev,123,456) }>按钮1</button>
</div>

通过bind函数向传递数据

function  fun1(args) {
    console.log(args)
}
let template = <div>
    <button onClick={fun1.bind(null,'123') }>按钮1</button>
</div>

注意 使用bind方式向回调中传递数据时是不能获取到event对象的


更新已渲染的元素

React元素都是不可变的。当元素被创建之后,你是无法改变其内容或属性的。一个元素就像电影的单帧:它代表了某个特定时刻的 UI。

如果要更新已经渲染界面可以通过重新通过render方法渲染。React DOM 会将元素和它的子元素与它们之前的状态进行比较,React 只会更新必要的部分

let msg='msg'
function  changeClick(ev) {
    msg = ev.target.value
    // 数据改变后重新渲染
    let template = <div>
        <input type="text" onChange={changeClick} />
        <div>{msg}</div>
    </div>

    ReactDOM.render(template, document.getElementById('root'));
}
let template = <div>
    <input type="text" onChange={changeClick} />
    <div>{msg}</div>
</div>

列表渲染

  1. for循环
let colors = ['red','blue','green','yellow']
let colorsJSX = []
// 将数组中内容展开到JSX表达式中
for (let i = 0; i < colors.length; i++) {
    colorsJSX.push( <li key={i}>{colors[i]}</li> )
}

let template = <div>
    <ul>{colorsJSX}</ul>
</div>
  1. map()
let colors = ['red','blue','green','yellow']
let colorsJSX =  colors.map( (item,index) => 
    <li key={index}>{item}</li> )
    
let template = <div>
    <ul>{colorsJSX}</ul>
</div>

列表中元素需要设置 key 属性,数组元素中使用的 key 在其兄弟节点之间应该是独一无二的。

  1. JSX中嵌入map()。JSX 允许在花括号中嵌入任何表达式
let colors = ['red','blue','green','yellow']

let template = <div><ul>
    {
        colors.map( (item,index) => 
            <li key={index}>{item}</li> )
    }
    </ul></div>

posted @ Zycin (非转载 来自个人学习资料整理)