1. 什么是react?
- 起源于Facebook,用来架构Ins网站。
- React 是一个声明式,高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面,这些代码片段被称作“组件。
- react是用于构建用户界面的。
- react使用了组件化的思想。
2.react有什么优势
- 它引入了一种新的方式来处理浏览器DOM,运用虚拟DOM实现了一个非常强大的渲染系统,提升了DOM的渲染效率。
- 设计优秀,一切基于js并且实现了组件化开发思想。
- 开发团队强悍,不用担心断更问题。
- 社区强大,很多问题能找到对应解决方案。
- 提供了无缝转到ReactNative上的开发体验。
- 很多企业中前端选型采用的是react。
3. 核心概念
虚拟DOM
- dom的本质是是什么
浏览器中的概念,用JS对象来表示页面上的元素,并提供了DOM操作的API。 - 什么是react中的虚拟dom
是框架中的概念,是程序员用js对象来模拟页面上的DOM和DOM嵌套。 - 为什么实现虚拟dom
为了实现页面中,DOM元素的高效更新。 - DOM和虚拟DOM的区别
4. 和vue的对比
- 相同之处
组件化的思想
virtual dom(虚拟dom) - 不同之处
- 数据不可变
- react整体是函数式的思想,把组件设计成纯组件,状态和逻辑通过参数传入,所以在react中,是单向数据流,推崇结合immutable来实现数据不可变。
- vue的思想是响应式的,也就是基于是数据可变的,通过对每一个属性建立Watcher来监听,当属性变化的时候,响应式的更新对应的虚拟dom。
- 使用js方式,还是模板方式
- react的思路是all in js,通过js来生成html,所以设计了jsx,还有通过js来操作css,社区的styled-component、jss等。
- vue是把html,css,js组合到一起,用各自的处理方式,vue有单文件组件,可以把html、css、js写到一个文件中.
- 组件的定义
react使用类的方式定义组件
vue使用声明的方式定义组件 - 什么功能内置什么交给社区
react自己做事情很少,大部分都是由社区在维护
vue由很多功能是自己内置的
5. react的使用
1. react快速使用
- 引入react的js文件
- 在界面上创建一块react控制区域
- 通过ReactDOM提供的render函数去进行界面的渲染
api
ReactDOM.render
函数
参数:
react对象;
这个react对象渲染的位置,是一个dom对象。
React.createElement
函数,创建react对象
参数:
创建react对象标签名
这个标签的属性
第三个参数是子元素
2. jsx
jsx是javascript的语法扩展,它拥有js的全部特性,并且包含一些新的语法。
// 声明一个react元素
const element = <h1>Hello, world!</h1>;
- 在jsx中插入表达式
- 都是使用{}的方式插入的表达式,不管是变量还是事件的定义
- 设置class的时候是通过className的方式设置的
3. 组件
- 函数式组件
通过函数的方式定义组件,可用于定义简单的组件。
参数:
props 父级传过来的参数
输出:
React对象,使用jsx的话可以直接写html标签。 - class定义组件
通过类的方式定义组件,与函数式组件不同的是通过类定义的组件有this,声明周期以及state。
- 这个类需要继承
React.Component
- 如何要初始化state,可以构造器中初始化,接受一个props参数,需要在第一行调用
super(props)
- 需要有个render函数,这个render返回react对象
- 注意事项
- 组件名字大写
- 只有一个根元素
生命周期
新版:
旧版:
添加事件
- 如何添加一个事件
// 注意的是事件绑定的一定是一个函数,所以是不加()的
<button onClick={ this.handleClick}>按钮1</button>
- 如何在函数中拿到this
手动给这个事件bind个thisbind(this)
或使用箭头函数来定义事件 - 如何给函数传递参数
<button onClick={ ()=>this.handleClick3(buttonName)}>按钮3</button>
条件渲染
- 直接在代码中定义一个变量,根据条件的不同设置不同的变量值
- 使用&&进行条件渲染
{
!isLogin && <button onClick={ this.handleClick2}>登录</button>
}
- 可以使用三目表达式
{
isLogin ? <button onClick={ ()=>this.handleClick3(buttonName)}>退出登录</button>
:
<button onClick={ this.handleClick2}>登录</button>
}
循环渲染
本质上还是使用js的语法进行循环渲染,渲染列表的时候注意加上key值
class List extends React.Component {
constructor(props){
super(props);
this.state={
list:[
{id:1,name:'张三'},
{id:2,name:'李四'},
{id:3,name:'王五'},
]
}
}
render() {
// 本质就是渲染数组
const list = [
<li key="1">第一个</li>,
<li key="2">第二个</li>
]
const dataList = [
{id:1,name:'张三'},
{id:2,name:'李四'},
{id:3,name:'王五'},
];
// map()
return (
<ul>
{
this.state.list.map((item,index)=>{
return <li key={item.id}>{item.name}</li>
})
}
</ul>
)
}
}
ReactDOM.render(<List />,document.getElementById('app'))
表单
这里表单数据无法像vue中使用双向绑定。
- 定义state
- 定义onChange事件,在事件中修改state的值
class Form extends React.Component {
constructor(props){
super(props);
this.state={
name:'测试'
}
}
handleChange=(e)=>{
this.setState({
name:e.target.value
})
}
render() {
const {name} = this.state;
return (
<div>
<input type="text" value={name} onChange={this.handleChange}/>
</div>
)
}
}
ReactDOM.render(<Form />,document.getElementById('app'))
状态提升
当兄弟组件之间的数据相互依赖的时候,可以将共享状态提升到最近的共同父组件中去。
组件库
Ant Design