这里只是对自己的学习进行一次总结，也是为了让自己以后如果长时间不使用快速记忆起来的笔记，如果想要学习，还是去官网看文档比较好一些。、

　　注意 下面的代码的 script标签的type类型都为 “text/babel”

目录

　　只是普通的变量是没有状态的， 只有组件才有状态或无状态

　　react是单向数据流

　　状态其实就是让数据驱动视图的响应式数据

let a = setTimeout(() => console.log( a = }, element =

{a}

document.getElementById( )

如果你学习过vue的话，那种双向数据绑定用的 Object.defineProperty() 叫数据劫持，然后用了订阅发布（观察者）那种模式，数据改变之后，会驱动着视图去改变

react必须要通过 setState() 这个组件的实例化对象去调用去改变自身的state才会去驱动视图是改变的，所以上面的那种就算数据改变了，但是视图是没有进行改变的。

看下面的es6的这种写法

.state = a: setTimeout(() => a: },

{

document.getElementById( )

?

　　其实之前一直都是使用的变量去指代html元素，没有使用过 class 那种，现在先使用ES5的写法去写一写什么是函数式声明。

　　先看一下之前的写法吧

const Head =

Head头部

const Foot =

底部

const element =

Element内容

document.getElementById('app' )

函数式声明是什么样子的呢

const Head =

Head头部

const Foot =

底部

const Element =

Element内容

, document.getElementById('app' )

可以很清晰的看到他们两个的区别，一个是使用变量来代表的，另外的一个是使用的组件形式代表的，开发中的写法都是使用ES6的class继承声明来写组件的

看一下函数声明的传值

const Head =

{props.title}

const Foot =

{props.con}

const Element =

< title={'头部信息啊' />

Element内容

< con={'底部的内容啊' />

, document.getElementById('app' )

这个样子和vue其实是挺像的，在标签上面写自定义的属性，子组件就可以接收到，等先这样看看，后面会使用class写的，class写起来感觉还容易理解一些。

注意： 函数式声明组件

　　1. 组件的首字母必须是大写

　　2. 不要使用H5新标签

下面看一个状态改变驱动视图的例子

const Head =

{props.title}

const Foot =

{props.con}

.state = title: '头部信息' con: '底部信息' setTimeout(() => title: '头部信息改变' },2000

< title={ />

Element内容

< con={ />

, document.getElementById('app' )

这样就可以和上面那种结合起来了，以后所有的组件都用class来写了，就不用function那种形式了。

?

　　react组件中的this和事件对象的不同写法有的写法是需要绑定this的

console.log(

title

.btn}>按钮

, document.getElementById('app' )

看到上面打印的this是undefined，下面有几种写法可以更正this指向实例化对象的

第一种 更正this和事件对象

.btn = .btn.bind(); console.log(

title

.btn}>按钮

, document.getElementById('app' )

需要注意的是上面的那种写法如果传递参数的话，那么事件对象就是最后一个没有对象参数的和js中的bind一样

.btn = .btn.bind(); console.log(

title

.btn(1)}>按钮

, document.getElementById('app' )

第二种 在行内bind

console.log(

title

.btn.bind(this,1)}>按钮 // 直接写到行内，在这里改变this的指向，同样的问题，那个参数的事件对象是最后一个

, document.getElementById('app' )

第三种 在一个函数里面执行它

console.log(

title

.btn(e,11 }}>按钮

, document.getElementById('app' )

第四种 改变函数的写法

btn = (e) => console.log(

title

.btn}>按钮

, document.getElementById('app' )

当然了这种方式如果要传递参数的话还是需要bind的。

?

　　如果想要在react中操作dom元素的话，有几种方法

第一种 直接使用js的方法

btn = () => const ele = document.querySelector('.h1'

title

.btn}>按钮

, document.getElementById('app' )

第二种 通过事件对象

btn = (e) =>

title

.btn}>按钮

, document.getElementById('app' )

第三种 ref

　　和vue一样

btn = (e) => console.log(

// 这里定义一个字符串的名字 .btn}>按钮

, document.getElementById('app' )

不过最新版本的不建议上面的那种写法了，也是ref建议下面的写法

以后我们就可以用下面这种最常用的方式

btn = (e) => console.log(

{.abc = abc}}>title

.btn}>按钮

, document.getElementById('app' )

第四种 ReactDOM.findDOMNode

btn = (e) => console.log( console.log(ReactDOM.findDOMNode(

{.abc = abc}}>title

.btn}>按钮

, document.getElementById('app' )

ref如果标记的是组件，那么ref他就是组件，但是findDOMNode这种方式是获取DOM元素的，就算里面的参数是组件，也是获得DOM元素

?

　　核心思想?

　　父组件给子组件传值 直接在组件上面添加属性就可以了 子组件通过props访问，得到 其实是构造函数实例化的时候传过去了

　　子组件给父组件传值 其实是父组件给子组件传一个函数，子组件调用的时候把 要传递的数据 放到 父组件传递过来的函数 的参数里面，然后父组件再去做他自己的操作

Item子组件

1 .state = sub: console.log('执行了吗' console.log('子组件打印this' console.log( console.log(

Item组件

{.state.sub.res}

.props.supFn.bind(,'子组件参数')} /> defaultValue="22" onClick={() => .props.supFn('参数2' />

}

父组件

.superFn = .superFn.bind( state = res: '里面的数据' console.log('父组件的函数' let data = res: '修改过后'

主页面

{.state.data.res}

.superFn} data={.state.data} aaa="传值啊">

, document.getElementById('app' )

　　要在服务器环境下打开文件

　　在谷歌浏览器输入框中输入

然后就可以使用模块导出导出功能了

const a = 1 const b = 2 export {a,b};

?

如果你看了我的文章有了一些收获我会非常高兴的，由于能力有限，文章有的部分解释的不到位，希望在以后的日子里能慢慢提高自己能力，如果不足之处，还望指正。

?

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!