react入门

(1)this.props 表示那些一旦定义,就不再改变的特性,而 this.state 是会随着用户互动而产生变化的特性

(2)组件的首字母必须大写,不然不报错也不显示

(4)在 JSX 中不能使用 if else 语句,但可以使用 conditional (三元运算) 表达式来替代

(2)Adjacent JSX elements must be wrapped in an enclosing tag

多个组件中返回的标签要用块级标签包裹起来

(3)报错:Unterminated JSX contents

多半是标签写错了,比如闭合标签斜线写在了后面


(5)类继承方式创建组件
image.png

react赋予state的特性,则是当state被修改时,会引起组件的一次重新渲染。即render方法会重新执行一次。也正是由于这个特性,因此当我们想要改变界面上的元素内容时,常常只需要改变state中的值就行了。这也是为什么结合render方法,我们可以不再需要jquery的原因所在。


为了区分ES6语法中的class关键字,当我们在jsx中给元素添加class时,需要使用className来代替


通常会在首次渲染改变组件状态(state)的行为,或者称之为有副作用的行为,都建议放在componentDidMount中来执行。主要是因为state的改动会引发组件的重新渲染。


我们很容易知道父组件想要修改子组件,只需要通过改变传入的props属性即可。那么子组件想要修改父组件的状态呢?正是父组件通过向子组件传递一个函数的方式来改变。

(6)React事件绑定的优点
image.png
(7)
image.png
(8)引入组件必须加上当前目录
image.png

否则会找不到模块


image.png
(9)create-react-app创建工程失败
image.png

修改淘宝源为默认源


image.png

进行该路径下缓存的删除


image.png
(10)展示组件与容器组件分离

分离的好处: 可以对展示组件中的数据进行类型判断PropTypes

(11)在jsx表达式中,也就是{ }中的组件,refs获取dom失效
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • react简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript M...
    宸桐阅读 3,158评论 2 5
  • 小白一枚,觉得阮一峰老师写的react入门非常简单易懂,所以就转载过来了。等到我自己后面能力变强之后,我就自己写一...
    LU7IN阅读 311评论 0 0
  • 1.React 的学习资源 react官方首页https://facebook.github.io/react/ ...
    贾里阅读 2,983评论 0 0
  • 本文是作为一个几乎不了解一系列框架工具的小白的入门笔记,也为与我一样面对框架工具迷茫不知道如何学起如何构建项目的同...
    薄荷星球阅读 535评论 1 4
  • 环境配置: 首先根据官网的教程,建立一个简单的工程需要引入三个文件:react.js、react-dom.js、b...
    耳_总阅读 1,011评论 0 0