React入门（JSX与组件）

最新推荐文章于 2024-04-21 20:55:55 发布
最新推荐文章于 2024-04-21 20:55:55 发布
阅读量325 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40119412/article/details/105474646
版权

1、react入门简单示例

  <div id="box"></div>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
  <script type="text/babel">
   //创建虚拟DOM
   var vDom1=<h1>hello world!</h1>;
   //渲染虚拟DOM
   ReactDOM.render(vDom1,document.getElementById('box'));   
  </script>

在这里插入图片描述

2、JSX练习示例

JSX(全称：JavaScript和XML)

  <div id="box1"></div>
  <div id="box2"></div>
  <script type="text/babel">
   const myId='Some';
   const contentt='I Like You';
   //创建虚拟DOM
   const vDom1=React.createElement('h2',{id:myId.toUpperCase()},contentt.toLowerCase())
   //渲染虚拟DOM
   ReactDOM.render(vDom1,document.getElementById('box1'));   
   //创建虚拟DOM
   const vDom2=<h3 id={myId.toLowerCase()}>{contentt.toUpperCase()}</h3>
   //渲染虚拟DOM
   ReactDOM.render(vDom2,document.getElementById('box2'));

在这里插入图片描述

3、练习

  <div id="box1"></div>
  <div id="box2"></div>
  <script type="text/babel">
   const names=['some','import','yesterday','water','Tom'];
   //创建虚拟DOM  //数组map方法遍历
   var vDom=<ul>  
    {names.map((value,index)=><li key={index}>{value}</li>)}
    </ul>
   //渲染虚拟DOM
   ReactDOM.render(vDom,document.getElementById('box1'))

在这里插入图片描述

4、模块、组件；模块化与组件化

模块：一般针对于js文件
组件：一般针对于html+css+js文件形成的一个功能
模块化与组件化（针对与项目而言）

  <div id="box1"></div>
  <div id="box2"></div>
  <script type="text/babel">
   //定义组件
   //方式1：工厂函数组件（简单组件）
   function Mycomponent(){
    return <h2>工厂函数组件（简单组件）</h2>
   }
   //渲染组件标签
   ReactDOM.render(<Mycomponent/>,document.getElementById('box1'))
   //ES6类组件（复杂组件）
   class Mycomponent2 extends React.Component{
    render(){
     return <h2>ES6类组件（复杂组件）</h2>
    }
   }
   //渲染组件标签
   ReactDOM.render(<Mycomponent2/>,document.getElementById('box2'))

在这里插入图片描述

5、组件三大属性

   class Mycomponent2 extends React.Component{    
    render(){
     console.log(this)
     return <h2>ES6类组件（复杂组件）</h2>
    }
   }

在这里插入图片描述
（1）states
states是组件对象最重要的属性，值是对象（可以包含多个数据）
初始化状态

constructor（props）{
	super(props);
	this.states={
		stateProp1:value1,
		stateProp2:value2
	}
}

读取某个状态值

this.state.statePropertyName

更新状态——组件界面更新

this.setState({
	stateProp1:value1,
	stateProp2.value2
})

栗子展示

   //创建组件
   class Like extends React.Component{
    constructor(props) {
        super(props);
     //初始化状态
     this.state={
      isLikeMe:false
     }
     //将新增加方法中的this强制绑定为组件对象
     this.HandleClik=this.HandleClik.bind(this)
    }
    //新添加的方法：内部的this默认不是组件对象，而是undefined
    HandleClik(){
     //得到状态
     const isLikeMe=!this.state.isLikeMe;
     //更新状态
     this.setState({isLikeMe})
    }
    render(){
     //读取状态
     //const isLikeMe=this.state.isLikeMe
     const {isLikeMe}=this.state;
     return <h2 onClick={this.HandleClik}>{isLikeMe?'你喜欢我':'我喜欢你'}</h2>
    }
   }   
   //渲染组件标签   
   ReactDOM.render(<Like />,document.getElementById('box1'));

（2）props

prop-types 安装使用https://www.npmjs.com/package/prop-types

npm install --save prop-types

import PropTypes from 'prop-types'; // ES6
var PropTypes = require('prop-types'); // ES5 with npm

<!-- development version -->
<script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>

<!-- production version -->
<script src="https://unpkg.com/prop-types@15.6/prop-types.min.js"></script>

<!-- development version -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>

<!-- production version -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.min.js"></script>

【1】读取属性值

this.props.propertyName

【2】对props中的属性值进行类型限制和必要性限制

Person.propTypes={
	name:React.PropTypes.string.isRequired,
	age:React.PropTypes.number.isRequired
}

【3】扩展属性：将对象的所有属性通过props传递

<Person {...person}/>

【4】默认属性值

Person.defaultProps={
	name:'JUNE'
}

【5】组件类的构造函数

constructor(props){
	super(props)
	console.log(props)//查看所有属性
}

栗子展示

  //创建组件
   function Person(props){
    return(
     <ul>
      <li>姓名{props.name}</li>
      <li>年龄{props.age}</li>
      <li>性别{props.sex}</li>
     </ul>
     ) 
    }   
   const p1={
    name:'TOM',
    age:22,
    sex:'女'
   }
   //渲染组件标签
   ReactDOM.render(<Person name={p1.name} age={p1.age} sex={p1.sex}/>,document.getElementById('box2'));

在这里插入图片描述栗子展示

   const p2={
    name:'Jarry'
   }

ReactDOM.render(<Person name={p2.name} />,document.getElementById('box2'));

在这里插入图片描述

完整栗子展示

   //创建组件
   function Person(props){
    return(
     <ul>
      <li>姓名{props.name}</li>
      <li>年龄{props.age}</li>
      <li>性别{props.sex}</li>
     </ul>
     ) 
    } 
   //指定属性默认值
   Person.defaultProps={
    age:18,
    sex:'男'
   }
   Person.propTypes={
    name:PropTypes.string.isRequired,
    age:PropTypes.number
   }
   const p1={
    name:'TOM',
    age:22,
    sex:'女'
   }
   const p2={
    name:'Jarry'
   }
   //渲染组件标签
   ReactDOM.render(<Person name={p1.name} age={p1.age} sex={p1.sex}/>,document.getElementById('box1'));
   //渲染组件标签
   ReactDOM.render(<Person name={p2.name} />,document.getElementById('box2'));

在这里插入图片描述

   class Person extends React.Component{
    constructor(props) {
        super(props);
    }
    render(){
     return(
      <ul>
       <li>姓名{this.props.name}</li>
       <li>年龄{this.props.age}</li>
       <li>性别{this.props.sex}</li>
      </ul>
      ) 
    }
   }

（3）refs
方法一：

    showInput(){
     const cont=this.refs.cont;
     alert(cont.value);     
    }
<input type="text" ref="cont"/>&nbsp;&nbsp;

方法二：

   //创建组件
   class Mycomponent extends React.Component{
    constructor(props) {
        super(props);
     this.showInput=this.showInput.bind(this);
     this.handleBlur=this.handleBlur.bind(this);
    }
    showInput(){ 
     alert(this.cont.value);  
    }
    handleBlur(event){
     alert(event.target.value);
    }
    render(){
     return(
      <div>       
       <input type="text" ref={(cont)=>this.cont=cont}/>&nbsp;&nbsp;
       <button onClick={this.showInput}>提示输入</button>&nbsp;&nbsp;
       <input type="text" onBlur={this.handleBlur}  placeholder="失去焦点作用"/>
      </div>
     )
    }
   }
   //渲染组件标签
   ReactDOM.render(<Mycomponent />,document.getElementById('box1'));

在这里插入图片描述
在这里插入图片描述

6、组件的组合

（1）拆分组件：拆分界面，抽取组件
（2）实现静态组件：
（3）实现动态组件：

  • 动态显示初始化数据
  • 交互功能（从绑定事件监听开始）

栗子实现

（1）步骤一：静态组件的是实现

   //创建组件
   class App extends React.Component{
    constructor(props){
     super(props);
     
    }
    render(){
     return(
      <div>
       <h1>组件的组合使用</h1>
       <Add/>
       <List/>
      </div>
     )
    }
   }
   class Add extends React.Component{
    render(){
     return(
      <div>
       <input type="text" />&nbsp;&nbsp;
       <button>添加</button>
      </div>
     )
    }
   }
   class List extends React.Component{
    render(){
     return(
      <div>
       <ul>
        <li>ffff</li>
        <li>sssss</li>
        <li>hhhhh</li>
       </ul>
      </div>
     )
    }
   }
   //渲染组件标签
   ReactDOM.render(<App />,document.getElementById('box1'));

在这里插入图片描述

（2）步骤二：动态显示数据

   //创建组件
   class App extends React.Component{
    constructor(props){
     super(props);
     //初始化状态
     this.state={
      items:['fffffff','llllllllll','ggggggg']
     }
     
    }
    render(){
     const {items}=this.state;
     return(
      <div>
       <h1>组件的组合使用</h1>
       <Add/>
       <List items={items}/>
      </div>
     )
    }
   }
   class Add extends React.Component{
    render(){
     return(
      <div>
       <input type="text" />&nbsp;&nbsp;
       <button>添加</button>
      </div>
     )
    }
   }
   class List extends React.Component{
    
    render(){
     const {items}=this.props;
     return(
      <div>
       <ul>
        {items.map((value,index)=><li key={index}>{value}</li>)}
       </ul>
      </div>
     )
    }
   }
   List.propTypes={
    items:PropTypes.array.isRequired
   }
   //渲染组件标签
   ReactDOM.render(<App />,document.getElementById('box1'));

（3）交互功能实现

   //创建组件
   class App extends React.Component{
    constructor(props){
     super(props);
     //初始化状态
     this.state={
      items:['fffffff','llllllllll','ggggggg']
     }
     this.addItem=this.addItem.bind(this);
    }
    addItem(item){
     const {items}=this.state;
     items.unshift(item);
     //更新状态
     this.setState({items})
    }
    render(){
     const {items}=this.state;
     return(
      <div>
       <h1>组件的组合使用</h1>
       <Add count={items.length} addItem={this.addItem}/>
       <List items={items}/>
      </div>
     )
    }
   }
   class Add extends React.Component{
    constructor(props) {
        super(props);
     this.addContent=this.addContent.bind(this);
    }
    addContent(){
     //读取输入数据
     const item=this.itemInput.value.trim();
     //检查合法性
     if(!item){
      return
     }
     //添加
     this.props.addItem(item);
     //清除
     this.itemInput.value=''
     
    }
    render(){
     return(
      <div>
       <input type="text" ref={input=>this.itemInput=input}/>&nbsp;&nbsp;
       <button onClick={this.addContent}>添加 #{this.props.count+1}</button>
      </div>
     )
    }
   }
   Add.propTypes={
    count:PropTypes.number.isRequired,
    addItem:PropTypes.func.isRequired
   }
   class List extends React.Component{
    
    render(){
     const {items}=this.props;
     return(
      <div>
       <ul>
        {items.map((value,index)=><li key={index}>{value}</li>)}
       </ul>
      </div>
     )
    }
   }
   List.propTypes={
    items:PropTypes.array.isRequired
   }
   //渲染组件标签
   ReactDOM.render(<App />,document.getElementById('box1'));

在这里插入图片描述

总结：

  • 一个组件只能有一个根节点.
  • 子组件不能直接改变父组件的状态。
  • 状态在那个组件，更新状态的行为就应该定义在那个组件。
  • 父组件定义函数，传递给子组件，子组件调用。

7、组件——收集表单数据

包含表单的组件分类:

非受控组件：需要时手动读取表单输入框中的数量。 以下例子针对用户名
受控组件：表单项输入数据能自动收集成状态。以下例子针对密码

栗子展示

    <div id="box1"></div>
    <div id="box2"></div>
    <script type="text/babel">
        //创建组件
        class LoginForm extends React.Component{
            constructor(props){
                super(props);
    this.state={
     pwd:''
    }
                this.handlerLogin=this.handlerLogin.bind(this);
    this.handleChange=this.handleChange.bind(this);
            }
            handlerLogin(event){
                const username=this.name.value;
    const {pwd}=this.state;
                alert(`用户名：${username},密码：${pwd}`);
                event.preventDefault();
            }
   handleChange(event){
    const pwd=event.target.value;
    this.setState({pwd})
   }
            render(){
                return(
                    <form action="/test" onSubmit={this.handlerLogin}>
                        <label>用户名：</label><input type="text" ref={(name)=>this.name=name}/>&nbsp;&nbsp;
                        <label>密码</label><input type="password" value={this.state.pwd} onChange={this.handleChange}/>&nbsp;&nbsp;
                        <input type="submit" value="登录"/>    
                    </form>
                )
            }
        }
        //渲染组件标签
        ReactDOM.render(<LoginForm/>,document.getElementById('box1'))

在这里插入图片描述

HaanLen
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react入门学习文档
08-29
React入门学习文档 React 是一个用于构建用户界面的 JavaScript 库，是一个数据驱动的 MVVM 模式的框架。学习 React 需要了解其主要特点、JSX 元素渲染、生命周期、组件事件等知识点。 React 介绍 React 是一个...
React 高阶组件入门介绍
08-28
React 高阶组件入门介绍 本篇文章主要介绍了 React 高阶组件的入门知识，包括高阶组件的定义、基本用法、组合方式、继承方式和注意事项。 高阶组件的定义： 高阶组件（Higher-Order Component，简称 HoC）是一种...
jsx中img标签中src属性的使用
BUG_CONQUEROR_LI的博客
09-06 1669
jsx中img标签中src属性的使用
React中JSX标签属性
xxx_qichengle的博客
07-02 1411
jsx标签上可以设置绝大部分和以前html标签一样的属性，如 checked、图片的src 除此之外， html的class属性改为className <div className="redCls">大头大头</div> html中label标签的for属性改为htmlFor <label htmlFor="inp"> 点我点我 <input id="inp" type="text" /> </label&g
react之组件与JSX
最新发布
weixin_73918953的博客
04-21 966
一直以来，创建网页时，Web 开发人员会用标签描述内容，然后通过 JavaScript 来增加交互。这种在 Web 上添加交互的方式能产生出色的效果。现在许多网站和全部应用都需要交互。React 组件是一段可以 使用标签进行扩展 的 JavaScript 函数。return (以下是构建组件的方法：前缀是一种JavaScript 标准语法（非 React 的特性）。它允许你导出一个文件中的主要函数以便你以后可以从其他文件引入它。
React 03 - JSX核心语法（2）
qq_43955202的博客
06-22 208
1.JSX核心语法2 1.1 图片格式处理 如果说原本的图片是400px * 400px的大小. 而我需要展示的仅仅为 120px * 120px. 这样就会降低浏览器性能。 1.http请求大的图片，降低性能。 2.浏览器处理图片又需要小号性能。 解决方法： 处理地址参数； //图片格式处理函数 function getSizeImage(imgUrl, size){ return imgUrl + `?param=${size}x${size}`; } 1.2 jsx绑定属性（基本属性
React进阶之路（一）-- JSX基础、组件基础
十八岁讨厌编程的博客
11-07 593
本文涉及React的介绍、开发环境搭建、JSX基础、组件基础和一个联手小项目。
JSX属性扩散
马优晨
06-24 578
假如一个组件有很多属性，当然可以如下这样做。 const Profile; let name = 'viking', age = 10, gender = 'Male'; let component = <Profile name={name} age={age) gender={gender} />; 但是，当这样的属性特别多的时候，书写和格式看起来就会变得很复杂，所以JSX有一个...
：date：React的预定日历组件-React开发
05-27
Calendarx /＆g:calendar:Calendarx您需要遵循的规定，React Calendarx的Calendar组件是一个状态容器，使创建自定义日历组件变得轻而易举。使用简单的API， Calendarx使您可以轻松显示日期和事件，更改视图以及在月...
react学习入门_react入门_react前端学习
09-20
它允许开发者使用相同的React组件模型和JSX，但输出的是iOS或Android的原生代码，而非Web应用。 在“react_basic”压缩包中，可能包含了关于这些概念的教程、代码示例和练习，帮助学习者逐步了解和掌握React。这些...
JavaScript的React框架中的JSX语法学习入门教程
10-22
JSX的引入使得React组件的编写更加直观和易读，但需要注意的是，JSX并非真正的XML，而是一种编译时的语法糖，最终会被转换为JavaScript。 在React中，我们可以创建一个组件，然后用JSX来定义其结构。例如： ```...
React 内 JSX了解及使用
DOM曼珠沙华的博客
05-16 1008
Jsx的全称是Javascript XML，react定义的一种类似XML的JS拓展语法：JS+XML，使我们可以用类似于xml方式描述视图。 本质是React.createElement(component, props, ...children) 的语法糖 原理：babel-loader会预编译JSx为React.createElement(type,props,...children)
在vue的jsx中使用图片预览插件v-viewer
weixin_39818813的博客
06-23 394
vue v-viewer组件在jsx的使用
JS数组方法shift()、unshift()用法实例分析
CRMEB小程序商城的博客
09-08 2万+
unshift 方法： 定义和用法 unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。 语法 arrayObject.unshift(newele1,newelet2,…,neweleX) 参数 描述 newele1 必需。向数组添加的第一个元素 newele2 可选。向数组添加的第二个元素。 newelex 可选。可添加若干个元素。 返回值 array 的新长度。 说明 unshift() 方法将把它的参数插入 arrayObject 的头部，并将已经存
JavaScript中unshift() 方法
qq_41623635的博客
05-12 1万+
unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。 返回值 把指定的值添加到数组的开头之后的新长度。 说明 unshift() 方法将把它的参数插入 arrayObject 的头部，并将已经存在的元素顺次地移到较高的下标处，以便留出空间。该方法的第一个参数将成为数组的新元素 0，如果还有第二个参数，它将成为新的元素 1，以此类推。 请注意：unshift() 方法不创建新的创建，而是直接修改原有的数组。 提示和注释 注释：该方法会改变数组的长度。 注释：unshift
React入门笔记（二）：JSX样式、组件初识
干巴爹兔的博客
06-15 762
开头 本笔记根据视频进度，由自己手写整理而成，仅限于学习交流。 二、React元素渲染 2.3、React JSX 简单地说，在React中写的JS都可以被称为JSX语言，他对我们的HTML做了扩充。 优点： JSX执行更快，编译为JavaScript代码时进行优化 类型更安全，编译过程如果出错就不能编译，及时发现错误 JSX编写模板更加快速 注意： JSX必须要有根节点 正常的普通HTML元素要小写，如果是大写的话React会默认认为是组件 2.4、JSX表达式 JSX中的表达式{}中除了能够放变
React中style的使用注意事项
热门推荐
russle的专栏
11-05 11万+
React中style的使用和直接在HTML中使用有些不同，第一，React中必须是style="opacity:{this.state.opacity};"这种写法，第二如果多个style格式如下，多个style中间使用逗号分割 var divStyle = { color: 'white', backgroundImage: 'url(' + imgUrl + ')', We...
React：一、初识react
a232884c的博客
05-16 499
react：一、初识react 1 开始 新建文件夹，使用vscode打开该文件夹，快捷键ctrl+` （Tab键上方）打开terminal终端，输入命令： npm i react react-dom 两个包安装成功： 目录结构如下： 2 使用 非脚手架搭建react： 文件结构： 2.1 引入react、react-dom、babel-min这几个js文件 因为是开发环境，所以全部引入development.js即可（注意引入顺序：先引入react，再引入react-dom）： <scri
react jsx组件 2018版
madehaiyoushei的博客
10-15 176
在根目录下创建component和pages文件夹 在pages下创建Header.jsx: 代码如下: var React=require("react"); class Header extends React.Component { render() { return ( &lt;h1&gt;Hello World!&lt;/h1&...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值