react开发教程(－)初识
React初识React是Facebook推出的一个javascript库(用来创建用户界面的Javascript库)，所以他只是和用户的界面打交道，你可以把它看成MVC中的V(视图)这一层。 组件React的一切都是基于组件的。web世界的构成是基于各种HTML标签的组合，这些标签也叫语意化标签每个标签代表一个含义，在react，vue，angular中我们可以将这些标签组合成一个轮播／导航...等，可以称为自定义组件。 每个组件都有各自的状态，当状态变更时，便会重新渲染整个组件。 import React,{ Component } from 'react';、
import './Comment.css';
class Comment extends Component {
render() {
return (
<div className="Comment">
{this.props.name}
{this.props.children}
</div>
);
}
}
export default Comment;
可以在其他组件中调用这个组件 import React,{ Component } from 'react';
import Comment from "./Comment";
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
{/**调用组件**/}
<Comment name="刘宇">组件插入内容</Comment>
</div>
);
}
}
export default App;
JSX在上面的案例中可以看到react吧html写到js当中，这种写法称为JSX。这是一种类似XML的写法，他可以定义类似HTML一样简洁的树状结构。这种语法结合了JavaScript语法和HTML的优点，既可以像平常一样使用HTML,也可以在里面前套JavaScript语法。这种有好的格式，让开发者易于阅读和开发。而且，对于组件来说，直接使用类似HTML的格式，也是非常嗨皮的。但是需要注意的是。JSX和HTML完全不是一回事，JSX只是作为编辑器，把类似HTML的结构编译成JavaScript。
JSX基本语法使用类XML语法的好处是标签可以任意嵌套，我们可以像HTML一样清晰地看到DOM树状结构及其属性。比如，我们构建一个List组件 const List = () => (
<ul>
<li>列表元素1</li>
<li>列表元素2</li>
<li>列表元素3</li>
<li>列表元素4</li>
</ul>
)
写这个组件的过程就像写html一样，只不过它被包裹在JavaScript的方法中，需要注意以下几点。
元素类型在React中创建的虚拟元素可以分为两类，DOM元素(DOM element)与组件元素(component element) 注释在HTML中，注释语法是<!--注释内容-->在jsx依旧使用的是js语法注释，唯一要注意的是，在一个组件的子元素位置使用注释要用{}包起来。 const List = () => (
<ul>
{/**这个是个列表**/}
<li>列表元素1</li>
</ul>
)
元素属性元素除了标签之外，另一个组成部分就是标签的属性。
在组件中元素的属性是完全自定义的属性，也可以理解为组件传递的参数。 <Comment name="刘宇">组件插入内容</Comment> 在自定义组件中除了上面传递属性的方法外也可以 const comment = <Comment>组件插入内容</Comment>; comment.props.name = "刘宇"; 也可以使用es6语法 const data = {name:"刘宇",age:10};
const comment = <Comment {...data}>组件插入内容</Comment>;
自定义html属性，上面说的是组件上的属性，在JSX中往DOM元素中传入自定义属性，React是不会渲染的； <div a="aaa"></div> //不被渲染 <div data-a="aaa"></div> //成功渲染 HTML转译React会将所有要显示到DOM的字符串转义，防止XSS。所以，如果jsx中含有转义后的实体字符。可以使用以下方法
虚拟DOM(Virtual DOM)在传统的web应用中每次更新页面的时候都需要手动操作DOM来更新
DOM操作非常昂贵。在前端开发中，性能消耗最大的就是DOM操作，而且这部分的操作代码不好维护。React把真实的DOM操作转成JavaScript对象树，也就是虚拟DOM; 这是普通的Html标签写法 <!--html--> <a class="link" href="https://github.com/facebook/react">React<a> 这是在js中手动生成相同dom的写法 //javascript dom
var a = document.createElement('a')
a.setAttribute('class','link')
a.setAttribute('href','https://github.com/facebook/react')
a.appendChild(document.createTextNode('React'))
//这是一种封装，沿用的React.createElement的命名
var a = React.createElement('a',{
className: 'link',href: 'https://github.com/facebook/react'
},'React')
所有html结构，都可以用js dom来构造，而且能将构造的步骤封装起来，做到「数据-dom结构」的映射。 dom本身在js中就是一种数据结构 建立一个javascript plain object，非常轻量，用它保存我们真正关心的与dom相关的少数数据；对它进行操作，然后对比操作前后的差异，再根据映射关系去操作真正的dom，无疑能提高性能。 相对于 DOM 对象，原生的 JavaScript 对象处理起来更快，而且更简单。DOM 树上的结构、属性信息我们都可以很容易地用 JavaScript 对象表示出来： var element = {
type: 'ul',// 节点标签名
props: { // DOM的属性，用一个对象存储键值对
id: 'list'
},children: [ // 该节点的子节点
{type: 'li',props: {className: 'item'},children: ["Item 1"]},{type: 'li',children: ["Item 2"]},children: ["Item 3"]},]
}
上面对应的HTML写法是： <ul id='list'> <li class='item'>Item 1</li> <li class='item'>Item 2</li> <li class='item'>Item 3</li> </ul> 每次数据更新后，重新计算虚拟DOM,并和上一次的作比较，对发生改变的部分做批量更新。React也提供了生命周期方法减少了不必要的对比过程，以保证性能 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |