- React快速入门（一）基础与语法
- React的介绍和特点
- React组件化的封装
- React数据事件处理
- JSX语法
- React事件绑定
- React条件渲染
- React列表渲染
React快速入门（一）基础与语法
- 用于构建用户界面的JavaScript库
- 目前国内外最流行的三大框架：Vue，React，Angular
React的介绍和特点
- 声明式
- 只需要维护自己的状态，当状态改变时，React可以根据最新的状态去渲染我们的UI界面
- 组件化
- 组件化开发页面是目前前端的流行趋势，我们会将复杂的界面拆分成一个个小的组件
- 跨平台
- React开发Web页面
- ReactNative用于开发移动端跨平台
- ReactVR开发虚拟现实Web应用程序
React开发依赖分析
必须依赖的三个库
- react：包含react所必须的核心代码
- react-dom：react渲染在不同平台所需要的核心代码
- babel：将jsx转换成React代码的工具
添加三个依赖的方式
- 方式—：直接CDN引入
- 方式二：下载后，添加本地依赖
- 方式三：通过npm管理(后续脚手架再使用)
React组件化的封装
<script type="text/babel">//用于创建一个React根，之后渲染的内容会包含在这个根中const root =ReactDOM.createRoot(document.querySelector("#root"))root.render(<h2>Hello World</h2>)
</script>
- 重构
const root = ReactDOM.createRoot(document.querySelector("#root"))// 1.将文本定义成变量let message = "Hello World"// 2.监听按钮的点击function btnClick() {// 1.1.修改数据message = "Hello React"// 2.重新渲染界面，否则状态修改无法生效！rootRender()}// 3.封装一个渲染函数function rootRender() {root.render((<div><h2>{message}</h2><button onClick={btnClick}>修改文本</button></div>))}rootRender()
//定义一个类，类名大写，组件的名称必须是大写，小写会被认为是HTML元素，继承自React.Component
class App extends React.Component {// 组件数据constructor() {super()this.state = {message: "Hello World",name: "why",age: 18}// 对需要绑定的方法, 提前绑定好thisthis.btnClick = this.btnClick.bind(this)}// 组件方法(实例方法)btnClick() {// 内部完成了两件事情: // 1.将state中message值修改掉 2.自动重新执行render函数函数this.setState({message: "Hello React"})}// 渲染内容 render方法render() {return (<div><h2>{this.state.message}</h2><button onClick={this.btnClick}>修改文本</button></div>)}
}
// 将组件渲染到界面上
const root = ReactDOM.createRoot(document.querySelector("#root"))
// App根组件
root.render(<App/>)
React数据事件处理
- 数据定义
- 参与界面更新的数据(参与数据流)：当数据(定义在当前对象的state中)变化时，需要更新组件渲染的内容
- 在构造函数中this.state ={定义的数据}
- 调用this.setState 来更新数据，并且通知React进行update操作;在进行update操作时，就会重新调用render函数，并且使用最新的数据，来渲染界面
- 不参与界面更新的数据：当数据变化时，不需要更新组件渲染的内容
- 参与界面更新的数据(参与数据流)：当数据(定义在当前对象的state中)变化时，需要更新组件渲染的内容
- 事件绑定
- 类中定义函数，将函数绑定到事件上
- this指向默认情况下是undefined，因为React不是直接渲染真实DOM，发生监听时，react在执行函数时并没有绑定this，默认情况下就是undefined
- 在绑定的函数中，可能想要使用当前对象，比如执行 this.setState 函数，就必须拿到当前对象的this
JSX语法
- JSX是一种JavaScript的语法扩展（eXtension)，也在很多地方称之为JavaScript XML，因为看起来就是一段XML语法;
- 它用于描述我们的UI界面，并且其完成可以和JavaScript融合在一起使用；它不同于Vue中的模块语法，需要专门学习模块语法中的一些指令(比如v-for、v-if、v-else、v-bind) ;
- JSX的书写规范:
- JSX的顶层只能有一个根元素，所以我们很多时候会在外层包裹一个div元素（或者使用后面我们学习的Fragment) ;
- 为了方便阅读，我们通常在jsx的外层包裹一个小括号)，这样可以方便阅读，并且jsx可以进行换行书写;JSX中的标签可以是单标签，也可以是双标签;
- JSX的注释：
{ */\* JSX的注释写法 \*/*}
// 1.定义App根组件class App extends React.Component {constructor() {super()this.state = {counter: 100,message: "Hello World",names: ["abc", "cba", "nba"],aaa: undefined,bbb: null,ccc: true,friend: { name: "kobe" },firstName: "kobe",lastName: "bryant",age: 20,movies: ["流浪地球", "星际穿越", "独行月球"]}}render() {// 1.插入标识符const { message, names, counter } = this.stateconst { aaa, bbb, ccc } = this.stateconst { friend } = this.state// 2.对内容进行运算后显示(插入表示)const { firstName, lastName } = this.stateconst fullName = firstName + " " + lastNameconst { age } = this.stateconst ageText = age >= 18 ? "成年人": "未成年人"const liEls = this.state.movies.map(movie => <li>{movie}</li>)// 3.返回jsx的内容return (<div>{/* 1.当变量是Number/String/Array直接显示出来 */}<h2>{counter}</h2><h2>{message}</h2><h2>{names}</h2>{/* 2.当变量是undefined/null/Boolean类型时，内容为空 */}<h2>{String(aaa)}</h2><h2>{bbb + ""}</h2><h2>{ccc.toString()}</h2>{/* 3.Object类型不能作为子元素进行显示*/}{/*<h2>{friend}</h2> ×*/}<h2>{friend.name}</h2><h2>{Object.keys(friend)[0]}</h2>{/* 4.可以插入对应的表达式*/}<h2>{10 + 20}</h2><h2>{firstName + " " + lastName}</h2><h2>{fullName}</h2>{/* 5.可以插入三元运算符*/}<h2>{ageText}</h2><h2>{age >= 18 ? "成年人": "未成年人"}</h2>{/* 6.可以调用方法获取结果*/}<ul>{liEls}</ul><ul>{this.state.movies.map(movie => <li>{movie}</li>)}</ul><ul>{this.getMovieEls()}</ul></div>)}getMovieEls() {const liEls = this.state.movies.map(movie => <li>{movie}</li>)return liEls}}// 2.创建root并且渲染App组件const root = ReactDOM.createRoot(document.querySelector("#root"))root.render(<App/>)
- JSX绑定属性
// 1.定义App根组件class App extends React.Component {constructor() {super()this.state = {title: "哈哈哈",imgURL: "https://ts1.cn.mm.bing.net/th/id/R-C.95bc299c3f1f0e69b9eb1d0772b14a98?rik=W5QLhXiERW4nLQ&riu=http%3a%2f%2f20178405.s21i.faiusr.com%2f2%2fABUIABACGAAgoeLO-wUo4I3o2gEw8Qs4uAg.jpg&ehk=N7Bxe9nqM08w4evC2kK6yyC%2bxIWTjdd6HgXsQYPbMj0%3d&risl=&pid=ImgRaw&r=0",href: "https://www.baidu.com",isActive: true,objStyle: {color: "red", fontSize: "30px"}}}render() {const { title, imgURL, href, isActive, objStyle } = this.state// 需求: isActive: true -> active// 1.class绑定的写法一: 字符串的拼接const className = `abc cba ${isActive ? 'active': ''}`// 2.class绑定的写法二: 将所有的class放到数组中const classList = ["abc", "cba"]if (isActive) classList.push("active")// 3.class绑定的写法三: 第三方库classnames -> npm install classnamesreturn (<div>{ /* 1.基本属性绑定 */ }<h2 title={title}>我是h2元素</h2>{/*<img src={imgURL} alt=""/>*/}<a href={href}>百度一下</a>{ /* 2.绑定class属性: 最好使用className */ }<h2 className={className}>哈哈哈哈</h2><h2 className={classList.join(" ")}>哈哈哈哈</h2>{ /* 3.绑定style属性: 绑定对象类型 */ }<h2 style={{color: "red", fontSize: "30px"}}>呵呵呵呵</h2><h2 style={objStyle}>呵呵呵呵</h2></div>)}}// 2.创建root并且渲染App组件const root = ReactDOM.createRoot(document.querySelector("#root"))root.render(<App/>)
- createElement需要传递三个参数:
- 参数一: type：当前ReactElement的类型;
如果是标签元素，那么就使用字符串表示“div” ;如果是组件元素，那么就直接使用组件的名称; - 参数二: config：所有jsx中的属性都在config中以对象的属性和值的形式存储;比如传入className作为元素的class;
- 参数三:children：存放在标签中的内容，以children数组的方式进行存储;如果是多个元素React内部有对它们进行处理，处理的源码在下方
- 参数一: type：当前ReactElement的类型;
React事件绑定
- React事件的命名采用小驼峰式(camelCase) ，而不是纯小写;
- 我们需要通过{}传入一个事件处理函数，这个函数会在事件发生时被执行;
this的绑定问题
- 方案一: bind给btnClick显示绑定this
- 方案二: 使用ES6 class fields语法
- 方案三: 事件监听时传入箭头函数（个人推荐)
事件参数传递
- 获取event对象
{/* 1.event参数的传递 */}
<button onClick={this.btnClick.bind(this)}>按钮1</button>
<button onClick={(event) => this.btnClick(event)}>按钮2</button>
- 获取更多对象
{/* 2.额外的参数传递 */}
<button onClick={this.btnClick.bind(this, "kobe", 30)}>按钮3(不推荐)</button>
<button onClick={(event) => this.btnClick(event, "why", 18)}>按钮4</button>
React条件渲染
- 条件判断语句：适合逻辑较多的情况
- 三元运算符：适合逻辑比较简单
- 与运算符&&：适合如果条件成立，渲染某一个组件;如果条件不成立，什么内容也不渲染
<div>{/* 1.方式一: 根据条件给变量赋值不同的内容 */}<div>{showElement}</div>{/* 2.方式二: 三元运算符 */}<div>{ isReady ? <button>开始战斗!</button>: <h3>赶紧准备</h3> }</div>{/* 3.方式三: &&逻辑与运算 */}{/* 场景: 当某一个值, 有可能为undefined时, 使用&&进行条件判断 */}<div>{ friend && <div>{friend.name + " " + friend.desc}</div> }</div></div>
React列表渲染
- 如何展示列表呢?在React中，展示列表最多的方式就是使用数组的map高阶函数;
- 很多时候我们在展示一个数组中的数据之前，需要先对它进行一些处理:比如过滤掉—些内容: filter函数
比如截取数组中的一部分内容: slice函数 - key主要的作用是为了提高diff算法时的效率
<div><h2>学生列表数据</h2><div className="list">{students.filter(item => item.score > 100).slice(0, 2).map(item => {return (<div className="item" key={item.id}><h2>学号: {item.id}</h2><h3>姓名: {item.name}</h3><h1>分数: {item.score}</h1></div>)})}</div></div>
// 1.定义App根组件class App extends React.Component {constructor() {super()this.state = {movies: ["星际穿越", "盗梦空间", "大话西游", "流浪地球"],currentIndex: 0}}itemClick(index) {this.setState({ currentIndex: index })}render() {const { movies, currentIndex } = this.statereturn (<div><ul>{ movies.map((item, index) => {return (<liclassName={ currentIndex === index ? 'active': '' }key={item}onClick={() => this.itemClick(index)}>{item}</li>)}) }</ul></div>)}}// 2.创建root并且渲染App组件const root = ReactDOM.createRoot(document.querySelector("#root"))root.render(<App/>)
// 1.定义App根组件class App extends React.Component {constructor() {super()this.state = {movies: ["星际穿越", "盗梦空间", "大话西游", "流浪地球"],currentIndex: 0}}itemClick(index) {this.setState({ currentIndex: index })}render() {const { movies, currentIndex } = this.stateconst liEls = movies.map((item, index) => {return (<liclassName={ currentIndex === index ? 'active': '' }key={item}onClick={() => this.itemClick(index)}>{item}</li>)}) return (<div><ul>{liEls}</ul></div>)}}// 2.创建root并且渲染App组件const root = ReactDOM.createRoot(document.querySelector("#root"))root.render(<App/>)
