首页  思维导图  详情

React

2023-06-20 22:21:50   11  举报





AI智能生成

为你推荐

查看更多



react

React

react

React

作者其他创作

大纲/内容

React 是一个用于构建用户界面的 JAVASCRIPT 库。React 主要用于构建 UI，很多人认为 React 是 MVC 中的 V（图）。React 起源于 Facebook 的内部项目，用于构建 Instagram 的网站，并于 2013 年 5 月开源。React 拥有更高的性能，代号发布非常简单，越来越多的人开始关注并使用它。

1.声明式设计−React采用声明范式，可以轻松描述应用。2.高效−React通过对DOM的模拟，最大限度地减少与DOM的交互。3.灵活−React可以与已知的库或框架很好地结合。4.JSX − JSX 是 JavaScript 语言的扩展。React 开发并不一定使用 JSX ，但我们建议使用它。5.组件− 通过React构建组件，使用代号更容易得到复用，能够很好的应用在大项目的开发中。6.单向响应的数据流− React 实现了单向响应的数据流，从而减少了一些重新生成代码，这也是为什么比传统数据绑定更简单。

特点

简介

实例中我们引入了三个库： react.development.min.js 、react-dom.development.min.js 和 babel.min.js：react.min.js - React 的核心库react-dom.min.js - 提供与 DOM 相关的功能babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。

<!DOCTYPE html><html><head><meta charset=\"UTF-8\" /><title>Hello React!</title><script src=\"https://cdn.staticfile.org/react/16.4.0/umd/react.development.js\"></script><script src=\"https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js\"></script><script src=\"https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js\"></script></head><body> <div id=\"example\"></div><script type=\"text/babel\

示例

$ npm install -g cnpm --registry=https://registry.npmmirror.com$ npm config set registry https://registry.npmmirror.com

cnpm install [name]

淘宝

通过 npm 使用 React

create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。create-react-app 自动创建的项目是基于 Webpack + ES6 。

$ cnpm install -g create-react-app$ create-react-app my-app$ cd my-app/$ npm start

使用 create-react-app 快速构建 React 开发环境

安装

要将React元素渲染到根DOM节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上

React 元素都是不可变的。当元素被创建之后，你是无法改变其内容或属性的。目前更新界面的唯一办法是创建一个新的元素，然后将它传入 ReactDOM.render() 方法：

更新元素渲染

React 元素渲染

ReactDOM.render( <div> <h1>菜鸟教程</h1> <h2>欢迎学习 React</h2> <p data-myattribute = \"somevalue\

使用 JSX

JavaScript 表达式

样式

注释

数组

React 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

React JSX

复合组件

React 组件

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。以下实例创建一个名称扩展为 React.Component 的 ES6 类，在 render() 方法中使用 this.state 来修改当前的时间。添加一个类构造函数来初始化状态 this.state，类组件应始终使用 props 调用基础构造函数。

React State(状态)

tate 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。而子组件只能通过 props 来传递数据。

function HelloMessage(props) { return <h1>Hello {props.name}!</h1>;} const element = <HelloMessage name=\"Runoob\

React Props

function ActionLink() { function handleClick(e) { e.preventDefault(); console.log('链接被点击'); } return ( <a href=\"#\" onClick={handleClick}> 点我 </a> );}

React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同:React 事件绑定属性的命名采用驼峰式写法，而不是小写。如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)

React 事件处理

在 React 中，你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。React 中的条件渲染和 JavaScript 中的一致，使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素，然后让 React 根据它们来更新 UI。

React 条件渲染

React 列表 & Keys

在本章节中我们将讨论 React 组件 API。我们将讲解以下7个方法:设置状态：setState替换状态：replaceState设置属性：setProps替换属性：replaceProps强制更新：forceUpdate获取DOM节点：findDOMNode判断组件挂载状态：isMounted

React 组件 API

当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：constructor(): 在 React 组件挂载之前，会调用它的构造函数。getDerivedStateFromProps(): 在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。render(): render() 方法是 class 组件中唯一必须实现的方法。componentDidMount(): 在组件挂载后（插入 DOM 树中）立即调用。render() 方法是 class 组件中唯一必须实现的方法，其他方法可以根据自己的需要来实现。

挂载

每当组件的 state 或 props 发生变化时，组件就会更新。当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：getDerivedStateFromProps(): 在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。根据 shouldComponentUpdate() 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。shouldComponentUpdate():当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。render(): render() 方法是 class 组件中唯一必须实现的方法。getSnapshotBeforeUpdate(): 在最近一次渲染输出（提交到 DOM 节点）之前调用。componentDidUpdate(): 在更新后会被立即调用。render() 方法是 class 组件中唯一必须实现的方法，其他方法可以根据自己的需要来实现。

更新

当组件从 DOM 中移除时会调用如下方法：componentWillUnmount(): 在组件卸载及销毁之前直接调用。

卸载

组合的生命周期可分为三个状态：Mounting(挂载)：已插入真实DOMUpdating(更新)：正在被重新冲洗染卸载(卸载)：已移出真实DOM

React 组件生命周期

React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据时可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成的请求。

React AJAX

class HelloMessage extends React.Component { constructor(props) { super(props); this.state = {value: 'Hello Runoob!'}; this.handleChange = this.handleChange.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } render() { var value = this.state.value; return <div> <input type=\"text\

React 表单与事件

class MyComponent extends React.Component { handleClick() { // 使用原生的 DOM API 获取焦点 this.refs.myInput.focus(); } render() { // 当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs return ( <div> <input type=\"text\" ref=\"myInput\" /> <input type=\"button\" value=\"点我输入框获取焦点\

React 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上。这个特殊的属性允许你引用 render() 返回的相应的支撑实例（ backing instance ）。这样就可以确保在任何时间总是拿到正确的实例。

React Refs

React

 收藏

立即使用

React