React
发布时间：2019-10-13 发布网站：大佬教程 code.js-code.com
大佬教程收集整理的这篇文章主要介绍了react基础语法二，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
这里只是对自己的学习进行一次总结，也是为了让自己以后如果长时间不使用快速记忆起来的笔记，如果想要学习，还是去官网看文档比较好一些。、
注意 下面的代码的 script标签的type类型都为 “text/babel”
目录
title1">一、 无状态的组件
只是普通的变量是没有状态的， 只有组件才有状态或无状态
react是单向数据流
状态其实就是让数据驱动视图的响应式数据
let a =
setTimeout(() =>{
console.log();
a =
},);
element =
);
m.render(
document.getElementById( )
如果你学习过vue的话，那种双向数据绑定用的 Object.defineProperty() 叫数据劫持，然后用了订阅发布（观察者）那种模式，数据改变之后，会驱动着视图去改变
react必须要通过 setState() 这个组件的实例化对象去调用去改变自身的state才会去驱动视图是改变的，所以上面的那种就算数据改变了，但是视图是没有进行改变的。
看下面的es6的这种写法
{
{
);
.state ={ // 只有在state里面的内容才是有无状态的
a:
setTimeout(() =>{
{ // 这里必要要用 setState这个方法来改变值才会驱动视图去改变 如果 this.state.a = 'sdfsd' 这样是不会驱动视图去改变的
a:
}, {
);
m.render(
document.getElementById( )
title2">二、 函数式声明
其实之前一直都是使用的变量去指代html元素，没有使用过 class 那种，现在先使用ES5的写法去写一写什么是函数式声明。
先看一下之前的写法吧
const Head = Head头部
);
const Foot = 底部
);
const element =
);
m.render(
document.getElementById('app' )
函数式声明是什么样子的呢
const Head = {
Head头部
const Foot = {
底部
const Element = {
Element内容
);
m.render(
, document.getElementById('app' )
可以很清晰的看到他们两个的区别，一个是使用变量来代表的，另外的一个是使用的组件形式代表的，开发中的写法都是使用ES6的class继承声明来写组件的
看一下函数声明的传值
const Head = {
const Foot = {
{props.con}
const Element = {
< title={'头部信息啊' />
Element内容
< con={'底部的内容啊' />
);
m.render(
, document.getElementById('app' )
这个样子和vue其实是挺像的，在标签上面写自定义的属性，子组件就可以接收到，等先这样看看，后面会使用class写的，class写起来感觉还容易理解一些。
注意： 函数式声明组件
1. 组件的首字母必须是大写
2. 不要使用H5新标签
下面看一个状态改变驱动视图的例子
const Head = {
const Foot = {
{props.con}
{
{
);
.state ={
title: '头部信息' con: '底部信息'
setTimeout(() =>{
{
title: '头部信息改变'
},2000 {
);
m.render(
, document.getElementById('app' )
这样就可以和上面那种结合起来了，以后所有的组件都用class来写了，就不用function那种形式了。
title3">三、 this以及事件对象
react组件中的this和事件对象的不同写法有的写法是需要绑定this的
{
{
);
{
console.log(); // 可以看到这里打印的是 undefined
{
);
m.render(
, document.getElementById('app' )
看到上面打印的this是undefined，下面有几种写法可以更正this指向实例化对象的
第一种 更正this和事件对象
{
{
);
.btn = .btn.bind();
E) {
console.log();
{
);
m.render(
, document.getElementById('app' )
需要注意的是上面的那种写法如果传递参数的话，那么事件对象就是最后一个没有对象参数的和js中的bind一样
{
{
);
.btn = .btn.bind();
{
console.log();
{
);
m.render(
, document.getElementById('app' )
第二种 在行内bind
{
{
);
{
console.log();
{
title@H_675_461@
// 直接写到行内，在这里改变this的指向，同样的问题，那个参数的事件对象是最后一个
);
m.render(
, document.getElementById('app' )
第三种 在一个函数里面执行它
{
{
);
E) {
console.log();
{
);
m.render(
, document.getElementById('app' )
第四种 改变函数的写法
{
{
);
btn = (E) =>{
console.log();
{
);
m.render(
, document.getElementById('app' )
当然了这种方式如果要传递参数的话还是需要bind的。
title4">四、 操作dom元素
如果想要在react中操作dom元素的话，有几种方法
第一种 直接使用js的方法
{
{
);
btn = () =>{
const ele = document.querySELEctor('.h1');
E);
{
);
m.render(
, document.getElementById('app' )
第二种 通过事件对象
{
{
);
btn = (E) =>{
);
{
);
m.render(
, document.getElementById('app' )
第三种 ref
和vue一样
{
{
);
btn = (E) =>{
console.log(s.abC) // 在这里获取它
{
title@H_675_461@ // 这里定义一个字符串的名字
);
m.render(
, document.getElementById('app' )
不过最新版本的不建议上面的那种写法了，也是ref建议下面的写法
以后我们就可以用下面这种最常用的方式
{
{
);
btn = (E) =>{
console.log(C)
{
);
m.render(
, document.getElementById('app' )
第四种 ReactDOm.findDOMNode
{
{
);
btn = (E) =>{
console.log(C)
console.log(ReactDOm.findDOMNode(C));
{
);
m.render(
, document.getElementById('app' )
ref如果标记的是组件，那么ref他就是组件，但是findDOMNode这种方式是获取DOM元素的，就算里面的参数是组件，也是获得DOM元素
title5">五、 父子组件传值
核心思想
父组件给子组件传值 直接在组件上面添加属性就可以了 子组件通过props访问，得到 其实是构造函数实例化的时候传过去了
子组件给父组件传值 其实是父组件给子组件传一个函数，子组件调用的时候把 要传递的数据 放到 父组件传递过来的函数 的参数里面，然后父组件再去做他自己的操作
Item子组件
1 {
{
);
.state ={
sub: s.data
{
console.log('执行了吗');
);
{
console.log('子组件打印this');
console.log();
console.log();
);
}
父组件
{
{
);
.superFn = .superFn.bind();
state ={
{
res: '里面的数据'
{
console.log('父组件的函数');
{a}`);
let data ={
res: '修改过后'
);
{
{
主页面
{.state.data.res}
- {.superFn} data={.state.data} aaa="传值啊">
);
m.render(
, document.getElementById('app' )
title6">六、在浏览器中支持import export
要在服务器环境下打开文件
在谷歌浏览器输入框中输入
@H_306_1262@@H_306_1262@![]()
title="react基础语法二" alt="react基础语法二" src="https://cn.js-code.com/res/2019/03-18/21/84c8fa0784dc8d80aa4d4d165d01efb2.png" >
然后就可以使用模块导出导出功能了
const a = 1 const b = 2
export {a,b};
如果你看了我的文章有了一些收获我会非常高兴的，由于能力有限，文章有的部分解释的不到位，希望在以后的日子里能慢慢提高自己能力，如果不足之处，还望指正。
大佬总结
以上是大佬教程为你收集整理的react基础语法二全部内容，希望文章能够帮你解决react基础语法二所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
