![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
梦捷者
梦捷者是我简书的大号,有相关技术文章,https://www.jianshu.com/u/59908635e9f3。
不要让未来的自己,讨厌现在的你;信念的背后即是梦想,梦想的背后即是未来。
展开
-
React 表单与事件和React Refs的使用(十四)
参考文档 React 表单与事件 React Refs原创 2020-06-04 18:07:15 · 127 阅读 · 0 评论 -
React AJAX(十三)
参考菜鸟教程 React中的AJAX的使用原创 2020-06-04 17:44:35 · 85 阅读 · 0 评论 -
React 组件生命周期(十二)
参考文档:React 组件生命周期 1、组件的生命周期可分成三个状态: Mounting:已插入真实 DOM Updating:正在被重新渲染 Unmounting:已移出真实 DOM 2、生命周期的方法有: componentWillMount 在渲染前调用,在客户端也在服务端。 omponentDidMount : 在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用,可以在原创 2020-06-04 17:24:35 · 87 阅读 · 0 评论 -
React 组件 API(十一)
1、React 组件 API中的7个方法: 设置状态:setState 替换状态:replaceState 设置属性:setProps 替换属性:replaceProps 强制更新:forceUpdate 获取DOM节点:findDOMNode 判断组件挂载状态:isMounted 2、设置状态:setState setState(object nextState[, function callback]) 参数说明 nextState,将要设置的新状态,该状态会和当前的state合并。 cal原创 2020-06-04 17:18:11 · 141 阅读 · 0 评论 -
React 列表 与 Keys(十)
参考文档: react随笔7 列表&Keys React 列表 & Keys 1、React列表的创建 采用JavaScript 中的map() 方法来创建列表。 以下HTML是使用 map() 方法遍历数组生成了一个 1 到 5 的数字列表: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>React 实例</title> <script原创 2020-06-04 15:43:36 · 103 阅读 · 0 评论 -
React中的条件渲染(九)
参考文档:React中的条件渲染 1、React中条件渲染的元素变量 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>React 实例</title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <s原创 2020-06-04 12:13:08 · 187 阅读 · 0 评论 -
React的事件处理(八)
1、在React元素中绑定事件有以下两点需要注意 在React中,事件命名采用驼峰命名方式,而不是DOM元素中的小写字母命名方式。例如onclick要写成onClick,onchange要写成onChange等。 处理事件的响应函数要以对象的形式赋值给事件属性,而不是DOM中的字符串形式。例如在DOM中绑定一个点击事件应该写成: <button onclick="clickButton()"> Click </button> 而在React元素中绑定一个点击事件变成这原创 2020-06-04 11:36:15 · 133 阅读 · 0 评论 -
React中的Props使用(七)
1、React Props的使用 state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。 实例中 name 属性通过 props.name 来获取 function HelloMessage(props) { return <h1>Hello {props.name}!</h1>; } const elem原创 2020-06-04 00:55:58 · 191 阅读 · 0 评论 -
React中的State(状态)(六)
1、React State(状态) 参考文档:React的State介绍 React 把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。 React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM)。 以下实例创建一个名称扩展为 React.Component 的 ES6 类,在 render() 方法中使用 this.state 来修改当前的时间。添加一个类构造函数来初始化状态 t原创 2020-06-03 23:16:16 · 139 阅读 · 0 评论 -
React须知的编写规范(五)
注意事项 (1)XML 的重点有且仅有一个根标签。 (2)原生 HTML 元素名以小写字母开头,而自定义的 React 类名以大写字母开头,比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签,否则也会报错 (3)ReactDOM.render(template,targetDOM) 方法接收两个参数: 第一个是创建的模板,多个 dom 元素外层需使用一个标签进行包裹,如 <div>; 第二个参数是插入该模板的目标位置。 templat原创 2020-06-03 22:20:09 · 125 阅读 · 0 评论 -
React中的组件(四)
参考文档:React 组件 1、自定义一个组件 接下来我们封装一个输出 “Hello World!” 的组件,组件名为 HelloMessage(这样可以使用组件进行管理渲染数据,从而使得管理更加简便): function HelloMessage(props) { return <h1>Hello World!</h1>; } const element = <HelloMessage />; ReactDOM.render( element原创 2020-06-03 22:02:54 · 84 阅读 · 0 评论 -
React中JSX的使用(三)
1、React JSX 参考文档:React JSX 以下这种看起来可能有些奇怪的标签语法既不是字符串也不是 HTML。它被称为 JSX, 一种 JavaScript 的语法扩展。我们推荐在 React 中使用 JSX 来描述用户界面。JSX 是在 JavaScript 内部实现的。 const element = <h1>Hello, world!</h1>; 元素是构成 React 应用的最小单位,JSX 就是用来声明 React 当中的元素。 2、JavaScript原创 2020-06-03 21:38:31 · 132 阅读 · 0 评论 -
React的安装及元素渲染应用(二)
参考文档: 1、React 安装 2、写react时script的type属性有两种值: text/babel text/jsx原创 2020-06-03 20:30:33 · 88 阅读 · 0 评论 -
React入门及须知(一)
参考文档:什么是react?react主要是做什么的?(问答篇) 1、什么是React? React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设Instagram 的网站。 React 是一个用于构建用户界面的JavaScript 库。React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。 2、React是解决什原创 2020-06-03 14:01:43 · 125 阅读 · 0 评论