初始React规范，React的特点和react组件和JSX

最新推荐文章于 2024-04-12 14:35:04 发布
最新推荐文章于 2024-04-12 14:35:04 发布
阅读量256 收藏
点赞数
分类专栏： react 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62008199/article/details/124750170
版权

React

一：React介绍

网址：https://zh-hans.reactjs.org/

再也看不到操作节点的操作

1.特点

  • 自动化的UI状态管理

  • 虚拟DOM

    用普通js对象来描述DOM结构，因为不是真实DOM，所以称之为虚拟DOM。（通过虚拟DOM来改变节点，把改变后的虚拟DOM和真实DOM比较，然后更新节点）

    好处：简化了DOM操作，提高了性能

  • 组件化开发

    组件化和模块化的共同点：都可以复用

    区别：组件化：根据不同的功能，不同的标签划分成不同的组件；模块化：是实现代码的管理，把一个页面分为多个模块；

    组件化：不同的标签划分成不同的组件，然后把所有组件组合在一起（结构，样式和行为）（一般要将组件化和模块化一起用，因为有了模块化才能更好的实现组件化），组件化就是把各个功能组件化，各自有各自的结构，样式和行为，用的时候可以直接调用这个组件

  • 完全在Javascript中定义UI

  • JSX

    1.里面可以使用html标签

  • 只是MVC架构中的v

    模型 视图 控制

  • 单向数据流

    数据传递只有一个方向（父组件—>子组件），能追寻都溯源

    why：如果把他设置为双向传递，性能会变低，而且追寻溯源比较困难

二：使用方法

createElwment("标签名","属性","标签的内容")

方法1:直接写入

  1. 引入在线的React插件

     <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>

  2. 案例

     //书写方式1：直接写
ReactDOM.render(React.createElement("h1", { title: "hello" }, "hello word"), document.getElementById("root"));
方法2：组合方式写
 //书写方式2：组合方式写
let HElement = React.createElement("h1", { title: "hello" }, "hello word");
let pElement = React.createElement("p", null, "段落1");
let RootElement = React.createElement("div", null,HElement,pElement);
ReactDOM.render(RootElement, document.getElementById("root"));
方法3：JSX语法

JSX是技术内定义的一套XML语法，语序在JS内像编译HTML代码一样的编写组件，最终都会被相应的工具编译成Javascript

React官方推荐使用JSX来编写组件

1.规范

  1. 组件可以嵌套组件；

  2. 组件可以当作标签来使用；

  3. JSX规则和XML一样

  4. 标签必须染个闭合 <RootElement />

  5. 属性

    • 大部分属性和html标签一致

    • 两个特殊：for=>htmlFor;class->className

      <label htmlFor="p1">内容</label>
<p className="p1" id="p1">段落1</p>

    • 可以自定义属性

  6. 花括号{}

    • 如果引用变量必须使用花括号
    • 里面能进行运算，但是不能使用条件语句和循环语句

  7. 注释{/**/}

2.用法

  1. 引入JSX的babel

    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  2. 案例

    注意：1.在写script的时候，记得加type="text/babel"

    ​ 2.return后面不能换行跟东西，不然会报错，如果偏要换行，就要要换行的时候加上一个()

    ​ 3.{}3.1:引用变量的语法，不能在外面加入"";3.2:里面能进行运算，但是不能使用条件语句和循环语句

    <script type="text/babel">
    let H1Element = function(){
                return <h1>hello React</h1>
            }
            let PElement = function(){
                return <div>
                    <label htmlFor="p1">内容</label>
                    <p className="p1" id="p1">段落1</p>
                </div>
            }
            let RootElement = function(){
                return <div>
                    <H1Element></H1Element>
                    <PElement></PElement>
                    </div>
            }
            ReactDOM.render(<RootElement />,document.getElementById("root"));
 </script>
3.循环

通过数组来进行循环

{}1.引用变量的语法，不能在外面加入"";2:里面能进行运算，能调用方法，但是不能使用条件语句和循环语还有判断语句

 let H1Element = function(){
            return <h1>hello React</h1>
        }
        let PElement = function(){
            let Pcontent = "我是段落1";
            let className = "p1"
            return <div>
                    <label htmlFor="p1">内容</label>
                    <p className={className} id="p1">{Pcontent}</p>
                </div>
        }
        let RootElement = function(){
           let arr = [1,2,3,4,5,6];
            //用Array创建一个数组，你需要多少个的时候，你就写多少，在里面在填充为0的数字（因为反正数字在里面都没啥用）
            let ary = new Array(10).fill(0);
            return <div>
                <H1Element></H1Element>
                {ary.map(()=><PElement></PElement>)}
                </div>
        }
        ReactDOM.render(<RootElement />,document.getElementById("root"));
4.JSX中的注释

{/*注释*/}

function render(){
	return <p>
		{/*这是注释内容*/}
	</p>
}

三：React中的组件

概念：组件是编写React应用的基础，一个应用就是由大大小小的组件组合而成

组件分类：

  1. 无状态组件-普通函数定义，无状态，没有生命周期，能过够优化性能

    function Top() {
            return <div></div>
        }

     let PElement = function(){
            let Pcontent = "我是段落1";
            let className = "p1"
            return <div>
                    <label htmlFor="p1">内容</label>
                    <p className={className} id="p1">{Pcontent}</p>
                </div>
        }

  2. 有状态组件：推荐ES6语法定义，React内部会创建实例，并拥有完整的生命周期；还有Hook写法

    class PElement extends React.Component {
            render() {
                return <div></div>
            }
        }

     class PElement extends React.Component {
            render() {
                let Pcontent = "我是段落1";
                let className = "p1"
                return <div>
                    <label htmlFor="p1">内容</label>
                    <p className={className} id="p1">{Pcontent}</p>
                </div>
            }
        }

四：组件的规范

  1. 每一个组件必须有返回值，如果返回值又是一个组件则必须有且仅有一个根元素
  2. 如果返回null或false，编译时会被替换为<noscript>

五：组件的传参

1.在由组件组成的应用中，组件之间的关系主要是父与子，类似于HTML标签

2.数据可以在组件之间传递，不过只能是单向，由父传递给子组件

3.用到的对象props（1）：通过自定义属性传递（2）：通过文本内容传递-children

只能单向传递数据流（父组件传递子组件）：数字，对象，样式

  1. 无状态逐渐传参

    能传属性值，父组件可以自定义名字传递给子组件props.属性名

    <h1 title={props.myTitle}>hello React</h1>

    传递标签里面的内容用props.children

    <p className={className} id="p1">{props.children}</p>

    let H1Element = function(props){
    return <h1 title={props.myTitle}>hello React</h1>
}
let PElement = function(props){
    let className = "p1"
    return <div>
        <label htmlFor="p1">内容</label>
    <p className={className} id="p1">{props.children}</p>
    </div>
}
let RootElement = function(){
    let arr = ["段落1","段落2","段落3","段落4"];
    return <div>
        <H1Element myTitle="标题1"></H1Element>
    	{arr.map((item)=><PElement>{item}</PElement>)}
             </div>
}
ReactDOM.render(<RootElement />,document.getElementById("root"));

  2. 有状态组件传参(用this)

    class H1Element extends React.Component {
    render(props) {
    	return <h1 title={this.props.mytitle}>hello React</h1>
    }
}

  3. 设置样式

    方法1：

     let H1Element = function(props){
     return <h1 title={props.myTitle} style={{color:"red",backgroundColor:"yellow"}} >hello React</h1>
}

    方法2：

    let H1Element = function(props){
    let style = {color:"red",backgroundColor:"yellow"};
    return <h1 title={props.myTitle} style={style} >hello React</h1>
}

    方法3：单独设置颜色

    let PElement = function(props){
    let Pcontent = "我是段落1";
    let className = "p1";
    let style = {
        color:"red",
        backgroundColor:"yellow",
        ...props.style
    };
    return <div>
        <label htmlFor="p1">内容</label>
    <p className={className} id="p1" style={style}>{props.children}</p>
    </div>
}
let RootElement = function(){
    let arr = [
        {
            letter:"段落1",
            style:{
                color:"blue",
                backgroundColor:"green"
            }},
        {
            letter:"段落2",
            style:{
                color:"blue",
                backgroundColor:"skyblue"
            }},
    ]
    return <div>
        <H1Element myTitle="标题1"></H1Element>
    {arr.map((item)=><PElement style={item.style}>{item.letter}</PElement>)}
    </div>
}
ReactDOM.render(<RootElement />,document.getElementById("root"));

六：实例，24字母不同背景颜色完成

<body>
    <div id="root"></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.min.js"></script>
    <script type="text/babel">
        //卡片
        class Card extends React.Component {
            render(props) {
                function color() {
                    let r = Math.floor(Math.random() * 256);
                    let g = Math.floor(Math.random() * 256);
                    let b = Math.floor(Math.random() * 256);
                    return "rgb(" + r + "," + g + "," + b + ")";
                }

                console.log(color());
                let style = { color: "black", backgroundColor: color(), width: "50px", height: "50px", textAlign: "center", lineHeight: "50px" };
                return <div style={style}>
                    {this.props.children}
                </div>
            }
        }
        //盒子
        class Root extends React.Component {
            render() {
                let ary = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "G", "K","R","M","N","O"];
                let style = { width: "270px", height: "270px", display: "flex", justifyContent: "space-around", flexWrap: "wrap", margin: "auto", border: " 1px solid" };
                return <div style={style}>
                    {ary.map((item) => <Card>{item}</Card>)}
                </div>
            }
        }
        ReactDOM.render(<Root />, document.getElementById("root"))
    </script>
</body>

七：如何划分组件

  1. 每个组件干的事情不能太多。否则粒度过哒，重用性低
  2. 粒度过细，导致代码量增加，复杂度增加
想被带飞的鱼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React基础（二）- 基本书写规范
Q_do_it的博客
07-15 236
基本书写规范 1. 注释 注释部分需要使用/**/ let myDemo = <div> {/* 我是需要注释的内容 */} hello </div> 2. 多行标签，需要有一个父元素包裹 let myDemo = <div> <div>我是第一个内容</div> <div>我是第二个内容</div> </div> 3. 如果想在jsx中使用表达
react-deco:React Utility Belt编写功能组件和声明性JSX代码
05-02
React Deco还给JSX什么是JSX 概述 React Deco是一个库，旨在使React复杂视图更具声明性，惯用性，易于阅读和易于编写，从而带来更多可维护性。 该库利用了Render-Props模式（ 和有效地使用），从而可以以更具声明性...
React组件规范
moyan的博客
11-07 403
React组件规范 框架 浏览数:121 2017-9-4 1 有状态组件只有render方法才能返回JSX，因为JSX中的虚拟DOM有一个_owner属性，这与它与组件实例进行绑定。如果其他方法里使用了JSX，_owner就没有与组件实例进行绑定。 2 render方法里面应该以 // bad render
react项目规范新手教程
最新发布
你怎么也喜欢嘴巴嘟嘟
04-12 706
React是一种流行的JavaScript库，用于构建用户界面。搭建一个React项目并不难，但确保项目的结构和配置正确可以帮助你更有效地开发和维护应用程序。以下是搭建React项目的一些步骤：
React书写规范
07-26 218
React项目建议 一.React+ES6+Redux+ant-design+webpack 二.建议加入eslint插件到编辑器中，帮助我们检查Javascript编程时的语法错误 基础规范 component 文件夹中，展示组件文件名，样式文件名，采用大驼峰命名，如：Login.js 、Login.less containers 文件夹中，容器组件文件名，采用大驼峰...
react组件书写规范
weixin_40222803的博客
01-07 196
组件的私有方法都用 _ 开头，所有事件监听的方法都用 handle 开头。把事件监听方法传给组件的时候，属性名用 on 开头 组件的内容编写顺序如下： static 开头的类属性，如 defaultProps、propTypes。 构造函数，constructor。 getter/setter（还不了解的同学可以暂时忽略）。 组件生命周期。 _ 开头的私有方法。 事件监听方法，handle*。...
:scissors: 用于截断 JSX 标记的 React 组件
06-08
React Truncate Markup 用于截断 JSX 标记的 React 组件。 代码片段示例 CodeSandbox 演示 为什么？ 使用 JS 截断而不是 CSS 的用例很少：您需要支持 IE、Firefox 或 Edge（并且不能使用 webkit-line-clamp）进行...
浅谈React中的元素、组件、实例和节点
08-27
主要介绍了浅谈React中的元素、组件、实例和节点，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jsx-control-statements：针对React JSX的Neater If和For
01-30
JSX控制语句 JSX-Control-Statements是Babel... JSX Control Statements遵循相同的原理-它提供了一种类似于组件的语法，可使您的render函数保持整洁和可读性，但在干净，易读JavaScript中却存在缺点。 JSX-Control-Stat
React 组件转 Vue 组件的命令写法
11-26
基于目前React和Vue比较火，开发react-to-vue 工具的目的是为了进一步提高组件的可复用用性，让组件复用不仅仅局限在一个框架里面 简介 对于react-to-vue工具，转化的是基本的react component，而不是全部的react...
React组件规范和生命周期
fangjuanyuyue的专栏
12-11 472
组件规范当你通过调用React.createClass()创建一个组件类时，应该提供一个包含render方法和其他可选的生命周期方法的说明对象。 请注意：可以使用简单的JavaScript类作为组件类。尽管有所不同，但是这些类应该实现大多数相同的函数。关于这些不同的更多信息，请参考我们关于ES6 class的文章。
react 组件编码规范
看陌生的风景的博客
06-07 257
react 组件优化规范
React组件设计规则
weixin_34202952的博客
01-22 571
react的目的是将前端页面组件化，用状态机的思维模式去控制组件。组件和组件之间肯定是有关系得，通过合理得组件设计，给每一个组件划定合适得边界，可以有效降低当我们对页面进行重构时对其他组件之间得影响。同时也可以使我们得代码更加美观。 1、高耦合低内聚。 高耦合：将功能联系紧密得部分放到一个容器组件内对外暴漏出index.js，目录结构如下...
react组件开发规范总结
weixin_30596343的博客
10-29 110
开发react也有一段时间了，一开始的随手写，生命周期乱用，无状态组件的不熟悉。现在逐渐规范一下，从网上各个地方copy过来，整理出一份文档。可能不全，后续还得多提炼总结和完善。 一、组件内方法书写，先写生命周期函数（按执行顺序写），再写自定义函数。 import React,{ Component } from 'react'; cla...
[react] react的书写规范有哪些
歌谣的博客
11-25 170
[react] react的书写规范有哪些 React元素必须使用大驼峰命名的方式 组件尽量命名，方便进行调试 JSX尽量用小括号包起来，更加直观，防止换行时出错 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
react编写规范之组件组件的内容编写顺序
anbiaogu4748的博客
12-06 321
1 static 开头的类属性，如 defaultProps、propTypes。 2 构造函数，constructor。 3 getter/setter（还不了解的同学可以暂时忽略）。 4 组件生命周期。 5 _ 开头的私有方法。 6 事件监听方法，handle*。 7 render*开头的方法，有时候 render() 方法里面的内容会分开到不同函数里面进行，这些函数...
‘XXX’ cannot be used as a JSX component 原因
weixin_45954775的博客
11-03 5390
react 对应ts 版本一致或者返回的是一个jsx数组而不是单个 JSX 元素
React jsx 和index.js
07-27
在 React 中，我们可以使用 JSX 来描述组件的结构和样式。它允许我们在 JavaScript 代码中嵌入 HTML 标记，并且可以使用 JavaScript 表达式来动态地生成组件的内容。使用 JSX，我们可以更方便地编写和维护 React ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值