React 概要
时间:2022-04-27
本文章向大家介绍React 概要,主要内容包括React 简介、React 的特点、React元素、React组件、状态与生命周期、事件处理、条件渲染、列表渲染、表单、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
React 简介
React 是一个开源的javascript库,用来构建用户接口(UI)。下图是React的一些基本信息:
React 的特点
- 单向数据流
- 数据自上而下
- Props 不可变
- States可变
- 任何数据、函数都可以作为属性(props)传 递给子组件(Props, States, Handlers, Styles)
- 事件冒泡
- 子组件触发的事件会传递到父组件
- 数据自上而下
- 虚拟DOM
- Javascript内存中的DOM数据缓存
- 组件发生变化时渲染虚拟DOM
- React将虚拟DOM与DOM的差异转化为一系列的DOM操作
- 将这些操作同步应用到真实的DOM中
- JSX
- 可以使用HTML语法创建Javascript 对象
- 代码更少
- 会被转化为Javascript执行
- Offline - react-tools
- In-Browser - JSXTransformer
- 不改变Javascript语义
- 其他特点
- 元素嵌套: 每个组件只允许有一个顶层元素(div, table ...)
- 自定义属性: 除了HTML标签自带属性之外,React也支持自定义属性,自定义属性需要加上data- 前缀
- JavaScript表达式: 可以通过{}在JSX中使用Javascript表达式
- 三目运算符: JSX中不能使用if-else但可以使用三目运算符
React元素
const element = <h1>Hello, world</h1>;
- React 元素 != DOM 元素
- 将元素渲染到 DOM 中 ReactDOM.render(element, document.getElementById('root'));
- 更新元素 - 重新 Render
- 更新元素只会更新变化的部分
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(
element,
document.getElementById('root')
);
}
setInterval(tick, 1000);
React组件
组件可以将UI切分成一些的独立的、可复用的部件,这样你就只需专注于构建每一个单独的部件。
- 如何定义一个组件
- 函数 function Welcome(props) { return <h1>Hello, {props.name}</h1>; }
- class class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } }
- 渲染组件
- const element = <Welcome name="Sara" />;
- 组合组件
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
状态与生命周期
因为react中props为只读,如果需要更新数据,可以使用react中的状态。在使用状态之前,需要把组件函数转变为类。
- 创建一个名称扩展为 React.Component 的ES6 类
- 创建一个叫做render()的空方法
- 将函数体移动到 render() 方法中
- 在 render() 方法中,使用 this.props 替换 props
- 删除剩余的空函数声明
将组件函数转化为类之后就可以添加状态了:
- 在 render() 方法中使用 this.state.date 替代 this.props.date
- 添加一个类构造函数来初始化状态 this.state
- 使用 this.setState() 来更新组件局部状
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({
date: new Date()
});
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('root')
);
事件处理
- React事件绑定属性的命名采用驼峰式写法,而不是小写。
- 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM元素的写法)
- React不能使用返回 false 的方式阻止默认行为
条件渲染
- 使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI
- 使用变量来储存元素 function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return <UserGreeting />; } return <GuestGreeting />; } ReactDOM.render( // Try changing to isLoggedIn={true}: <Greeting isLoggedIn={false} />, document.getElementById('root') );
- &&运算符 function Mailbox(props) { const unreadMessages = props.unreadMessages; return ( <div> <h1>Hello!</h1> {unreadMessages.length > 0 && <h2> You have {unreadMessages.length} unread messages. </h2> } </div> ); }
- 三目运算符 render() { const isLoggedIn = this.state.isLoggedIn; return ( <div> The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in. </div> ); }
列表渲染
- React 可以直接渲染列表
- Keys可以在DOM中的某些元素被增加或删除的时候帮助React识别哪些元素发生了变化。因此应当给数组中的每一个元素赋予一个确定的标识。
- 元素的key只有在它和它的兄弟节点对比时才有意义
- jsx中可以使用map
function ListItem(props) {
return <li>{props.value}</li>;
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<ListItem key={number.toString()}
value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
表单
- HTML表单元素与React中的其他DOM元素有所不同,因为表单元素生来就保留一些内部状态
- 在HTML当中,像<input>,<textarea>, 和 <select>这类表单元素会维持自身状态,并根据用户输入进行更新
- 在React中,可变的状态通常保存在组件的状态属性中,并且只能用 setState(). 方法进行更新
class Reservation extends React.Component {
constructor(props) {
super(props);
this.state = {
isGoing: true,
numberOfGuests: 2
};
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
render() {
return (
<form>
<label>
Is going:
<input
name="isGoing"
type="checkbox"
checked={this.state.isGoing}
onChange={this.handleInputChange} />
</label>
<br />
<label>
Number of guests:
<input
name="numberOfGuests"
type="number"
value={this.state.numberOfGuests}
onChange={this.handleInputChange} />
</label>
</form>
);
}
}
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Javascript中的数据类型
- JAVA 应用日志最佳实践
- 用pageadmin cms系统进行网站制作的经验总结
- 14个Linux系统安全小妙招,总有一招用的上
- CVE-2020-14645:Weblogic远程代码执行复现
- Centos7 安装Mysql-寻找共性-万变不离其宗
- MySQL 入门、安装和客户端管理工具
- MySQL 基本使用(上):DDL 和 DML 语句
- MySQL 基本使用(下):DCL 语句和聚合函数
- 玩转 PhpStorm 系列(二):导航篇
- 带你写出符合Promise/A+规范Promise的源码
- 「R」R Docker 教程
- 「Workshop」第十期:聚类
- 使用 Vue 3.0,你可能不再需要Vuex了
- 14个 JavaScript 代码优化技巧