![](https://img-blog.csdnimg.cn/955edc374b3a4cc68fcff0b22418285c.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
React 学习笔记
文章平均质量分 84
React 学习笔记
梁辰兴
深情不及久伴,紘爱无需多言。
展开
-
React State 状态
以下实例中创建了 LikeButton 组件,getInitialState 方法用于定义初始状态,也就是一个对象,这个对象可以通过 this.state 属性读取。当用户点击组件,导致状态变化,this.setState 方法就修改状态值,每次修改以后,自动调用 this.render 方法,再次渲染组件。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM)。原创 2023-05-10 15:02:15 · 213 阅读 · 0 评论 -
React 组件
除此之外还需要注意组件类只能包含一个顶层标签,否则也会报错。注意:在添加属性时, class 属性需要写成 className ,for 属性需要写成 htmlFor ,这是因为 class 和 for 是 JavaScript 的保留字。实例中 WebSite 组件使用了 Name 和 Link 组件来输出对应的信息,也就是说 WebSite 拥有 Name 和 Link 的实例。我们可以通过创建多个组件来合成一个组件,即把组件的不同功能点进行分离。本节将讨论如何使用组件使得我们的应用更容易来管理。原创 2023-05-10 14:59:59 · 642 阅读 · 0 评论 -
React JSX
在 JSX 中不能使用 if else 语句,但可以使用 conditional (三元运算) 表达式来替代。我们可以在以上代码中嵌套多个 HTML 标签,需要使用一个 div 元素包裹它,实例中的 p 元素添自定义属性 data-myattribute,添加自定义属性需要使用 data- 前缀。我们可以在 JSX 中使用 JavaScript 表达式。React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。要渲染 HTML 标签,只需在 JSX 里使用小写字母的标签名。原创 2023-05-10 14:52:12 · 659 阅读 · 0 评论 -
React 安装
我们建议在 React 中使用 CommonJS 模块系统,比如 browserify 或 webpack,本教程使用 webpack。create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境。注意:如果我们需要使用 JSX,则 标签的 type 属性需要设置为 text/babel。如果你的系统还不支持 Node.js 及 NPM 可以参考我们的 Node.js 教程。原创 2023-05-10 14:38:26 · 623 阅读 · 0 评论 -
React 学习笔记
React 是一个用于构建用户界面的 JAVASCRIPT 库。React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。原创 2023-05-10 14:21:45 · 714 阅读 · 0 评论