React概念
好处
使用原生js实现添加元素
<body>
<ul id="list"></ul>
<script>
let person = [
{
id : '001',
name : '张三',
age : 18
},{
id : '002',
name : '李四',
age : 20
},{
id : '003',
name : '王五',
age : 22
}
];
let htmlStr = '';
person.forEach((person)=>{
htmlStr += `<li>${person.name}-${person.age}</li>`;
})
document.getElementById('list').innerHTML = htmlStr;
</script>
</body>
使用react实现添加元素
Hello React
<div id="test">
</div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom库 -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel.js文件,将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
**//表示这里写的不是js,而是jsx,需要babel转换**
**//1.创建虚拟dom**
** ****const VDOM = <h1>Hello,React</h1>**** ** **//此处可以不用写引号,是虚拟dom**
**//2.渲染虚拟dom到页面
//接收两个参数,第一个参数是需要渲染的dom,第二个参数是容器**
**ReactDOM.render(VDOM,document.getElementById('test'))**
</script>
虚拟dom
使用js
//1.创建虚拟dom
const VDOM = React.createElement('h1',{id:'title'},'Hello,React')
//此处可以不用写引号,是虚拟dom
//参数1 标签名 参数2 标签属性 参数3 元素
使用jsx
//1.创建虚拟dom
const VDOM = (
<h1 id="title">
<span>Hello,React</span>
</h1>)
//2.渲染虚拟dom到页面
//接收两个参数,**第一个参数是需要渲染的dom**,**第二个参数是容器**
ReactDOM.render(VDOM,document.getElementById('test'))
概念及优点
jsx语法规则
1.定义虚拟dom时不要写引号
2.标签里混入js用{}
id={myId.toLowerCase()}
3.样式类名指令要用className而不是class
className="title"
4.内联样式要写style={ {key:value}}
style={ {color:'white',fontSize:'30px'}}
5.必须只有一个根标签 div包住
<div></div>
6.标签必须闭合
<input type="text"/>
7.定义组件开头首字母大写
<Good></Good>
.title{
background-color: aqua;
width: 200px;
}
<div id="test"></div>
const myId = 'test';
const myData = 'hello react';
//1.创建虚拟dom
const VDOM = (
<div>
<h2 className="title" id=**{myId.toLowerCase()}**>
<span style={
{color:'white',fontSize:'30px'}}>**{myData.toLowerCase()}**</span>
</h2>
<h2 className="title" id=**{myId.toUpperCase()}**>
<span style={
{color:'white',fontSize:'30px'}}>**{myData.toUpperCase()}**</span>
</h2>
<input type="text"/>
<Good></Good>
</div>
)
//2.渲染虚拟dom
ReactDOM.render(VDOM,document.getElementById('test'))
JSX小练习 传递数据
<script type="text/babel">
//模拟数据
const data = ['React', 'Vue', 'Angular'];
//创建虚拟dom
const VDOM = (
<div>
<h1>前端js框架</h1>
<ul>
{
data.map((item,index) => {
return <li key={index}>{item}</li>
})
}
//简便写法
{data.map(item => <li>{item}</li>)}
</ul>
</div>
)
//将虚拟dom渲染到页面上
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
模块与组件 模块化与组件化
React面向组件编程
函数式组件
//创建函数组件
function Demo(){
return <h1>我是用函数定义的组件</h1>
//**这里this指向undefined**
}
//渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById('test'))
**</Demo>是需要渲染的dom id选择器test选中的div是容器**
复习类相关知识
<script>
//创建一个person类
class Person {
//构造器方法
constructor(name,age){
//构造器中的this是 类的实例对象
this.name = name;
this.age = age;
}
//一般方法
say(){
console.log(`${this.name}说:我今年${this.age}岁`);
}
}
//创建一个person的实例对象
const p1 = new Person('tom',18);
const p2 = new Person('jerry',20);
console.log(p1);//Person {}
console.log(p2);//Person {}
p1.say();//tom说:我今年18岁
p2.say();//jerry说:我今年20岁
</script>
继承
类组件
//创建类式组件 继承react里面的组件
class HelloMessage extends React.Component {
render(){
return (
<div>
<h1>Hello {this.props.name}</h1>
</div>
)
}
}
注意事项
render是放在哪里的?MyComponent的原型对象上,供实例使用。
render中的this是谁?— MyComponent的实例对象。
执行了ReactDOM.render(<MyComponent/>.......之后,发生了什么?
1.React解析组件标签,找到了MyComponent组件。
2.发现组件是使用类定义的,随后new出来该类的实例,并通过该实例调用到原型上的render方法。
3.将render返回的虚拟DOM转为真实DOM,随后呈现在页面中.
简单组件 || 复杂组件
带不带state