因为近期刚刚接触到相关的项目,就准备记录一下自己学习react从入门到放弃的一个过程
注:本文章有借鉴,有自我理解,如果有错误请指正,谢谢。
一、什么是React?
1.1,react概念:
- React是用于构建用户界面的JavaScript框架。(我的理解:就是通过原生js封装的一个框架,类似jquery)
1.2,react和jquery的区别:
- 本质上,React是一个UI库,而JQuery是一个工具库或者说是插件库。(但是实际上jquery也有自己的UI库)
- 对Dom操作的不同,React提供了一整套的虚拟Dom,所有的操作都在虚拟的Dom上而并非真实的Dom,而Jquery操作的是真实Dom。(当然,这几乎是所有的UI库与jquery的区别)
二、简单使用React
2.1,引用
<!--React 的核心库-->
<script type="text/javascript" src="../../js/react.development.js"></script>
<!--提供与 DOM 相关的功能-->
<script type="text/javascript" src="../../js/react-dom.development.js"></script>
<!--Babel 可以将 ES6 代码转为 ES5 代码,并且Babel 内嵌了对 JSX 的支持。-->
<script type="text/javascript" src="../../js/babel.min.js"></script>
2.2,调用
就让我们开始一个简单的hello react!吧
<div id="test"></div>
<script type="text/babel">
//创建虚拟dom
const v_dom = <h1>Hello React!</h1>
//渲染真实dom
ReactDOM.render(v_dom ,document.getElementById('test'), function (){
console.log('渲染完毕');
})
</script>
三、创建虚拟dom的两种方式
3.1,使用React的createElement方法创建
<div id="test"></div>
<script type="text/javascript">
/**
* 创建一个span标签,内容为Hello React
*/
const v_span = React.createElement('span',{},'Hello React');
/**
* 创建h1标签作为span的父标签 id为v_dom
*/
const v_dom = React.createElement('h1',{id: 'v_dom'},v_span);
/**
* 渲染虚拟dom
*/
ReactDOM.render(v_dom,document.getElementById('test'));
</script>
3.2使用jsx语法创建
<div id="test"></div>
<script type="text/babel">
/**
* 创建虚拟dom
*/
const v_dom = (
<h1 id='v_dom'>
<span>Hello React</span>
</h1>
);
/**
* 渲染虚拟dom
*/
ReactDOM.render(v_dom, document.getElementById('test'));
</script>
四、jsx语法
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<div id="test4"></div>
<script type="text/babel">
console.time("timer");
/**
* 1.创建标签简单写法
*/
const v_dom_1 = (
<h3>创建h3标签简单写法v_dom_1</h3>
);
/**
* 2.在JSX中计算表达式,直接使用一层{}花括号即可
*/
const v_dom_2 = (
<div>
<span>这是小写,v_dom_2</span>
<span>这是大写,{'v_dom_2'.toUpperCase()}</span>
</div>
);
/**
* 3.在JSX中定义属性,直接声明字符串变量即可,或者通过计算表达式方式取值,注意的是,行内样式的定义必须用双花括号
*/
const v_dom_3 = (
<div>
<p id="content" className="skyblue">使用类样式时,class要替换为className</p>
<p style={{ color: 'red', fontSize: '18px' }}>行内样式设置的段落标签</p>
</div>
);
/**
* 4.利用jsx遍历一个列表
*/
const data= ['v_dom_1','v_dom_2','v_dom_3']
const v_dom_4 = (
<div>
<ul>
{
data.map((item,index)=>{
return <li key={index}>{item}</li>
})
}
</ul>
</div>
)
ReactDOM.render(v_dom_1,document.getElementById('test1'));
ReactDOM.render(v_dom_2,document.getElementById('test2'));
ReactDOM.render(v_dom_3,document.getElementById('test3'));
ReactDOM.render(v_dom_4,document.getElementById('test4'));
</script>
实现效果
…