初识react

最新推荐文章于 2022-06-07 14:24:54 发布
最新推荐文章于 2022-06-07 14:24:54 发布
阅读量104 收藏
点赞数
分类专栏： react 文章标签： reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45271323/article/details/103667437
版权

文章目录

初识react

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./base/react.min.js"></script>
    <!-- 提供react 对象 -->
    <script src="./base/react-dom.min.js"></script>
    <!-- 操作dom 更新-->
    <script src='./base/browser.min.js'></script>
    <!-- 帮助浏览器解析jsx语法 -->
</head>
<body>
<div id="app">

</div> 
<script type="text/babel">//'text/babel' 告知浏览器 该范围内有jsx 需要用browser 库解析
// 创建的组件是虚拟dom
// 将虚拟dom 渲染为真实dom
// React中的组件首字母必须大写
// React 同样将组件名当成标签名使用
// JS代码中写标签 浏览器解析不了 jsx  javascript xhtml（严格模式html）
// jsx 让我们可以在js中写标签
// jsx 就是一个语法糖 直接写标签形成虚拟dom
let Yinxm = React.createClass({// 通过react 对象下createClass 方法创建一个组件
    getInitialState(){
    //state需要通过 getInitialState 进行初始化使用 { 变量 表达式}
    return{
        name:'殷乡梅'
    }
    },
    render(){ // render 函数 内部返回一个jsx - 对比模板引擎
        console.log(this);//当前组件
        let {name} = this,state
        return(// jsx 必须只有一个根元素,标签必须闭合
            <h1>Hi,sunny
            {name}
            </h1>
        )
    }
})
// ReactDOM.render(<Yinxm></Yinxm>,document.getElementById('app'))
ReactDOM.render(<Yinxm/>,app)//简写 
// ReactDOM render 方法 参数1  要渲染的组件 参数2表示该 组件挂载到哪一个dom元素
</script>
</body>
</html>

在这里插入图片描述

  • vue中 数据本身来源2种
    props 父组件传递的
    data 组件本身的
  • React 本身的数据来源 2中
    props 组件传递的 只能用不能改
    state 组件自己的 可以修改

数据承载 - 单向数据流

  • props 从组件外部传递而来 在使用的组件中只能使用不能修改
  • state 组件内部的数据 可以修改
  • 数组 react 将数组的每一项进行拆分渲染
  • 对象 react 不能直接绑定对象

注释 - {/* 要注释的内容*/}

  • v-if 条件渲染 1.三元表达式 2.|| 3.函数内部控制返回值
  • v-for 列表渲染 react 中数组的每一项会被展开
  • v-bind 属性绑定 属性名={ 表达式} 类名不能用class 用className
  • v-on 事件绑定 和原生js类似 onclik onClick

兄弟 状态提升 上下文 全局状态管理

列表循环
<script src="../base/react.min.js"></script>
  <!-- 提供react 对象 -->
  <script src="../base/react-dom.min.js"></script>
  <!-- 提供react dom 对象 -->
  <script src='../base/browser.min.js'></script>
  <!-- 帮助浏览器解析jsx语法 -->
</head>
<body>
 <div id='app'>

 </div> 
<script  type='text/babel'>
let Component = React.createClass({
  getInitialState(){
    return{
       arr:['爱情','恐怖','动作'] //=>[<li>1</li>,<li>2</li>]
    }
  },
  render(){
    return(
      <ul>
        {this.state.arr.map((item,index)=>{
          return (<li>{item}</li>)
        })}
      </ul>
    )
  }
})
ReactDOM.render(<Component/>,app)
/*
在react 中没有v-for 
渲染数组会将数组的每一项进行拆分 结合map方法实现列表渲染
*/ 
</script>
</body>

在这里插入图片描述

条件渲染
方法一:三元表达式 {this.state.show?'呵呵':'嘻嘻'}
方法二:或 运算与  ||
方法三:函数处理
属性绑定
  • react 中属性绑定：类名要用className
let Component = React.createClass({
  getInitialState(){
    return{
      color:false
    }
  },
  render(){
    return(
      <div className={this.state.color?"red":"blue"}>
      </div>
    )
  }
})
ReactDOM.render(<Component/>,app)
事件绑定
  • react 不像vue 数据变化页面自动改变
  • react 中数据改变了 想让页面更新 需要通过 setState方法
    如果没有参数 默认参数就是事件对象
    事件的处理函数不要加（） 加了（） 相当于自执行
    如果要传参数 通过 bind 进行传参 fun.bind(this,params1,params2 …) 默认参数会放到参数的最后方
    或者 在事件处理函数 函数的内部执行要触发的函数 默认是没有事件对象 要从外部函数进行获取
Tab选项卡
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="../base/react.min.js"></script>
  <!-- 提供react 对象 -->
  <script src="../base/react-dom.min.js"></script>
  <!-- 提供react dom 对象 -->
  <script src='../base/browser.min.js'></script>
  <!-- 帮助浏览器解析jsx语法 -->
  <style>
      *{
        margin:0;
        padding:0;
      }
      ul{
            margin:0 auto;
            height:100px;
            width:600px;
            display:flex;

        }
        ul li{
            list-style: none;
            width:200px;
            height:100px;
            /* background:pink; */
            display:flex;
            justify-content: center;
            align-items: center;
        }
        ol{
        margin:0 auto;
        height:400px;
        width:600px;
        overflow: hidden;
        }
        ol li{
        width:600px;
        height:200px;
        background:powderblue;
        display:flex;
            justify-content: center;
            align-items: center;
        }
        .blue{
          background: paleturquoise;
        }
        .pink{
          background: palegreen;
        }
  </style>
</head>
<body>
 <div id='app'>

 </div> 
<script  type='text/babel'>
let Component = React.createClass({
  getInitialState(){
        return{
            tabs:['地狱使者','sunny','鬼怪大叔'],
            selIndex:0
        }
  },
  changeIndex(index){
    //修改默认选中项
    this.setState({selIndex:index})
    console.log(this);
  },
  renderContent(){
    // 将内容元素进行封装
    let content=this.state.tabs[this.state.selIndex]
    return (
      <div>
        {content}
      </div>
    )
  },
  render(){
    let {tabs,selIndex}= this.state
    return(
      <div>
         <ul>
           {
              tabs.map((item,index)=>{
                return (<li className={selIndex===index?'pink':'blue'}
                  onClick={this.changeIndex.bind(this,index)}
                >{item}</li>)
              })
           }
         </ul>
        <ol>
          <li>{this.renderContent()}</li>
        </ol>
      </div>

    )
  }
})
ReactDOM.render(<Component/>,app)
/*
1. tab显示
2. 点击tab切换样式
3. 点击控制div的显示隐藏
*/  
</script>
</body>
</html>

在这里插入图片描述

ref
<div id='app'>

 </div> 
<script  type='text/babel'>
let Component = React.createClass({
  getDom(){
    console.log(this.refs)
  },
  render(){
    console.log(this.refs.hehe)
    return(
      <div>
         <span ref='hehe'>djdjd</span>
         <p ref='hehe'>hehehe</p>  
         <button onClick={()=>{
          this.getDom()
         }}>getDom</button>
      </div>
    )
  }
})
ReactDOM.render(<Component/>,app)
/*
ref用法1 和vue中一样可以绑定一个元素 
绑定后通过 this.refs 进行获取
*/ 
</script>

在这里插入图片描述

<body>
 <div id='app'>

 </div> 
<script  type='text/babel'>
let Father = React.createClass({
  render(){
    return(
      <div>
         <h1>这里是父组件</h1>
         <hr/>
         <Son>
           你好
         </Son>
      </div>
   
    )
  }
})
let Son = React.createClass({
  render(){
    console.log(this)
    return(
      <div>
         <h3>这里是子组件</h3>
         {this.props.children}
      </div>
   
    )
  }
})
ReactDOM.render(<Father/>,app)
/*
组件标签内部的内容默认也是不渲染的
但是我们可以组件对象里 的props.children 进行获取
*/ 
</script>
</body>

在这里插入图片描述

<body>
 <div id='app'>

 </div> 
<script  type='text/babel'>
let Father = React.createClass({
  render(){
    return(
      <div>
         <h1>这里是父组件</h1>
         <hr/>
         <Son ref='hehe'></Son>
         <button onClick={()=>{
           console.log(this)
         }}>get</button>
      </div>
   
    )
  }
})
let Son = React.createClass({
  getInitialState(){
    return{name:123}
  },
  test(){
  },
  render(){
    return(
      <div>
         <h3>这里是子组件</h3>
      </div>
    )
  }
})
ReactDOM.render(<Father/>,app)
/*
ref 除了给dom元素使用 还可以给组件使用
可以获取到绑定的组件对象 （获取子组件里的方法和数据）
*/ 
</script>
</body>

在这里插入图片描述

组件通信

  • 父子
    • props 传参 将父组件的数据传给子组件
    • ref 绑定一个组件 父组件调用子组件的方法
  • 子父 props 传递父组件的方法

数据承载 - props

 <div id='app'>

 </div> 
<script  type='text/babel'>
let Father = React.createClass({
  getInitialState(){
    return{
    name:'殷乡梅'
    }
  },
  render(){
    return(
      <div>
         <h1>这里是父组件</h1>
          <Son hehe={this.state.name}></Son>
      </div>
   
    )
  }
})
let Son = React.createClass({
  getDefaultProps(){  //getDefaultProps 初始化props的默认值 
    return{
      hehe:'韩梅梅'
    }
  },
  render(){
   console.log('son',this)
    return(
      <div>
         <h3>这里是子组件</h3>
         {this.props.hehe} 
         {/*props默认值和外部传递冲突 以外部为准*/}
      </div>
   
    )
  }
})

ReactDOM.render(<Father/>,app)
</script>
</body>

在这里插入图片描述

setState异步
 <div id='app'>

 </div> 
<script  type='text/babel'>
let Father = React.createClass({
  getInitialState(){
    return{
    num:1
    }
  },
  add(){
    // let num=++this.state.num
    setTimeout(()=>{
      // setState 方法是一个异步的，在同步中多次执行setState 会被 合并 只触发一次render，
      //如果在异步中执行setState 不会被合并 setState相当于同步，有几次setState执行几次render
      this.setState({num:1})
      this.setState({num:2})
      this.setState({num:3})
      this.setState({num:4})
    },1000)
   
  },
  render(){
    console.log('渲染了')
    return(
      <div>
         <h1>父组件</h1>
        {this.state.num}
        <button onClick={this.add}>增加</button>
      </div>
   
    )
  }
})
ReactDOM.render(<Father/>,app)
</script>
</body>
糖果的小九
关注
专栏目录
vue初体验，组件，组件传值
qq_45271323的博客
11-26 256
vue
Web前端-初识React框架
最新发布
qq_25592087的博客
11-07 612
官方说明：用于构建用户界面的 JavaScript 库。
初识React
Greenary的博客
06-07 178
React
初识 React
weixin_53412458的博客
02-25 300
React
初识 react
iteval
09-05 157
<!-- 学 react 的原因： 1. 原生 js 操作 DOM 繁琐、效率低，每次都要去获取 DOM 每次操作 DOM 都会引起页面的重绘重拍 2. 原生 js 没有组件化，代码复用率低 react 的特点： 1. 采用组件化模式，声明式编码来提高开发效率以及组件复用率 2. 在 React Native 可以使用 react 语法进行移动端开发 3. 使用虚拟 DOM + Diffing 比较算法，尽量减少与真实 D
React（1）初识React框架
小海前端
12-23 565
文章目录前言一、搭建React工作环境二、第一个React程序三、初步认识JSX语法：总结关于作者 前言 React框架在现代前端开发的项目中越来越常用，该框架的语法结构也深深的影响着其他框架在设计时的思路和理念。本专栏从这篇文章开始，以零基础出发，一步步总结和讲解React框架的使用。 一、搭建React工作环境 首先我们先来将React工作环境搭建起来。要想让React工作起来，需要用到下列三个库： react.development.js：React核心库。 react-dom.developm
初识React Native动画基础概述
React Native动画是指在React Native应用中使用的动画效果，通过对组件的状态进行变化，实现元素的平移、透明度改变、旋转等动画效果。 ## 1.2 React Native动画的作用和重要性 React Native动画可以为移动应用...
初识React Native样式Flex布局
React Native 是 Facebook 推出的一款开源移动应用框架，可以使用 JavaScript 和 React 来进行跨平台移动应用开发。 ## 1.2 React Native的优势和特点 - **跨平台性**: 开发者可以使用相同的代码库在 iOS 和 ...
React源码解析系列：初识React框架的核心概念
React框架简介 React框架作为一个流行的前端库，不仅有着强大的生态系统，而且还深受开发者们的喜爱。本章将介绍React框架的历史与发展以及其核心理念。 ## 1.1 React框架的历史与发展 React是由Facebook开发的...
component
qq_45271323的博客
04-17 2461
高阶组件是什么？如何理解？ 高阶组件就是一个对普通组件的包装，并返回一个新的组件。本质上就是一个函数。 react-redux connect==>容器组件 connect()(ui组件) withRouter withRouter(App) https://www.jb51.net/article/137272.htm 高阶组件就是接受一个组件作为参数，返回一个相对增强性的组...
react和vue底层原理
qq_45271323的博客
04-17 2397
react的diff算法？ 1.把树形结构按照层级分解，只比较同级元素。时间复杂度为n 2.给列表结构的每个单元添加唯一的 key 属性，方便比较。 3.React 只会匹配相同 class 的 component（这里面的 class 指的是组件的名字） 4.合并操作，调用 component 的 setState 方法的时候, React 将其标记为 dirty.到每一个事件循环结束, Re...
createElement 和 cloneElement 有什么区别？
qq_45271323的博客
05-13 1389
createElement 和 cloneElement 有什么区别？ 传入的第一个参数不同 React.createElement():JSX 语法就是用 React.createElement()来构建 React 元素的。 它接受三个参数，第一个参数可以是一个标签名。如 div、span，或者 React 组件。第二个参数为传入的属性。第三个以及之后的参数，皆作为组件的子组件。 React.createElement(type, [props], [...children]); Reac
状态(state)和属性(props)之间有何区别
qq_45271323的博客
05-13 1314
状态(state)和属性(props)之间有何区别 ​ State 是一种数据结构，用于组件挂载时所需数据的默认值。 ​ State 可能会随着时间的推移而发生突变，但多数时候是作为用户事件行为的结果。 ​ Props(properties 的简写)则是组件的配置。props 由父组件传递给子组件，并且就子组件而言，props 是不可变的(immutable)。 ​ 组件不能改变自身的 props，但是可以把其子组件的 props 放在一起(统一管理)。Props 也不仅仅是数据–回调函数也可以通过 pro
调用 super(props) 的目的是什么
qq_45271323的博客
05-25 862
​ 在 super() 被调用之前，子类是不能使用 this 的， 在 ES2015 中，子类必须在 constructor 中调用 super()。 ​ 传递 props 给 super() 的原因则是便于(在子类中)能在 constructor 访问 this.props。
React为什么要搞一个Hooks
qq_45271323的博客
03-31 641
React为什么要搞一个Hooks https://github.com/happylindz/blog/issues/19 想要复用一个有状态的组件太麻烦了！ 我们都知道React的核心思想就是，将一个页面拆分成一堆独立的，可以复用的组件，并且用自上而下的单向数据流的形式将这些组件串联起来。但如果在大型的项目中使用React，那么我们就会发现项目中实际上很多React组件冗长且难以复用。尤其是那...
react生命周期
qq_45271323的博客
12-24 328
react生命周期示意图 初始化的生命周期 没有dom ，没有数据 this的指向不一样 一个是组件的构造函数 一个实例化对象 仅仅初始化数据 ，16版本会被废弃 getDefaultProps （props初始化，也可理解成默认值） getInitialState （ 1.实例化几次，就触发几次 2.dom获取不到 3.this有） <bod...
setState
qq_45271323的博客
04-28 291
当你调用 setState 的时候，发生了什么事？ 将传递给 setState 的对象合并到组件的当前状态，这将启动一个和解的过程，构建一个新的 react 元素树，与上一个元素树进行对比（ diff ），从而进行最小化的重渲染。 constructor(props){ super(props); this.state = { age:1 } } this.setState((prev...
redux
qq_45271323的博客
04-17 204
redux相关API redux中包含: createStore(), applyMiddleware(), combineReducers() store对象: getState(), dispatch(), subscribe() react-redux: <Provider store={store}>: 向所有的容器组件提供store connect( state =...
React中文教程：组件化开发与实践
教程强调了克服对JSX的初识偏见，鼓励读者尝试并理解React的工作方式。" React是Facebook推出的一款用于构建用户界面的JavaScript库，特别适合构建单页应用。它的核心特点是组件化，每个组件都有自己的状态和渲染...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值