这里只是对自己的学习进行一次总结,也是为了让自己以后如果长时间不使用快速记忆起来的笔记,如果想要学习,还是去官网看文档比较好一些。、
注意 下面的代码的 script标签的type类型都为 “text/babel”
目录
只是普通的变量是没有状态的, 只有组件才有状态或无状态
react是单向数据流
状态其实就是让数据驱动视图的响应式数据
如果你学习过vue的话,那种双向数据绑定用的 Object.defineProperty() 叫数据劫持,然后用了订阅发布(观察者)那种模式,数据改变之后,会驱动着视图去改变
react必须要通过 setState() 这个组件的实例化对象去调用去改变自身的state才会去驱动视图是改变的,所以上面的那种就算数据改变了,但是视图是没有进行改变的。
看下面的es6的这种写法
函数式声明
其实之前一直都是使用的变量去指代html元素,没有使用过 class 那种,现在先使用ES5的写法去写一写什么是函数式声明。
先看一下之前的写法吧
函数式声明是什么样子的呢
可以很清晰的看到他们两个的区别,一个是使用变量来代表的,另外的一个是使用的组件形式代表的,开发中的写法都是使用ES6的class继承声明来写组件的
看一下函数声明的传值
{props.title}
const Foot ={props.con}
const Element =这个样子和vue其实是挺像的,在标签上面写自定义的属性,子组件就可以接收到,等先这样看看,后面会使用class写的,class写起来感觉还容易理解一些。
注意: 函数式声明组件
1. 组件的首字母必须是大写
2. 不要使用H5新标签
下面看一个状态改变驱动视图的例子
{props.title}
const Foot ={props.con}
.state = title: '头部信息' con: '底部信息' setTimeout(() => title: '头部信息改变' },2000Element内容
< con={ />这样就可以和上面那种结合起来了,以后所有的组件都用class来写了,就不用function那种形式了。
react组件中的this和事件对象的不同写法有的写法是需要绑定this的
title
看到上面打印的this是undefined,下面有几种写法可以更正this指向实例化对象的
第一种 更正this和事件对象
title
需要注意的是上面的那种写法如果传递参数的话,那么事件对象就是最后一个没有对象参数的和js中的bind一样
title
第二种 在行内bind
title
// 直接写到行内,在这里改变this的指向,同样的问题,那个参数的事件对象是最后一个第三种 在一个函数里面执行它
title
第四种 改变函数的写法
title
当然了这种方式如果要传递参数的话还是需要bind的。
如果想要在react中操作dom元素的话,有几种方法
第一种 直接使用js的方法
title
第二种 通过事件对象
title
第三种 ref
和vue一样
// 这里定义一个字符串的名字
不过最新版本的不建议上面的那种写法了,也是ref建议下面的写法
以后我们就可以用下面这种最常用的方式
{.abc = abc}}>title
第四种 ReactDOM.findDOMNode
{.abc = abc}}>title
ref如果标记的是组件,那么ref他就是组件,但是findDOMNode这种方式是获取DOM元素的,就算里面的参数是组件,也是获得DOM元素
核心思想
父组件给子组件传值 直接在组件上面添加属性就可以了 子组件通过props访问,得到 其实是构造函数实例化的时候传过去了
子组件给父组件传值 其实是父组件给子组件传一个函数,子组件调用的时候把 要传递的数据 放到 父组件传递过来的函数 的参数里面,然后父组件再去做他自己的操作
Item子组件
Item组件
{.state.sub.res}
.props.supFn.bind(,'子组件参数')} /> defaultValue="22" onClick={() => .props.supFn('参数2' />父组件
主页面
{.state.data.res}
支持import export
要在服务器环境下打开文件
在谷歌浏览器输入框中输入
然后就可以使用模块导出导出功能了
如果你看了我的文章有了一些收获我会非常高兴的,由于能力有限,文章有的部分解释的不到位,希望在以后的日子里能慢慢提高自己能力,如果不足之处,还望指正。