react语法

最新推荐文章于 2023-03-25 16:06:04 发布

drunk喵咪

最新推荐文章于 2023-03-25 16:06:04 发布

阅读量303

点赞数

分类专栏： react 文章标签： reactjs

本文链接：https://blog.csdn.net/jdrunk/article/details/109451189

版权

react 专栏收录该内容

21 篇文章 4 订阅

订阅专栏

一、库和框架

库：小而巧  优点：可以方便的很方便的从一个库切换到另一个库，但代码基本不变
框架：大而全 优点：框架提供了一整套的解决方案，所以，在项目中切换到另外的框架比较困难

二、react与vue对比

组件化方面：
1、什么叫模块化
是从代码角度进行分析；把一些可复用的代码，抽离为单个模块；便于项目的维护和开发
2、什么叫组件化
是从ui界面进行分析；把可复用的ui元素，抽离为单独的组件；便于项目的维护和开发
3、组件化好处
随着项目规模的增大，组件越来越多，方便把现有组件拼接成完整项目
4、vue如何实现组件化
通过.vue文件来创建对应的组件
1）template  结构
2)script  行为
3)style  样式
5、react如何实现组件化
react中有组件化的概念，但没有像vue中一样的模板文件
react中，一切都是以js来表现的

三、为什么学react

1)react设计很优秀，一切基于js并且实现了组件化开发思想
2）开发团队实例强悍，不必担心断更
3）社区强大，很多问题都能找到对应的解决方案
4）提供了无缝转到reactNative上的开发体验，拓展我们的技术能力，增强我们的核心竞争力
5）很多企业中，前端项目的技术选型采用的是react.js

四、react中几个核心概念

1、虚拟dom (virtual docuent object model)
1）dom本质是什么？ 浏览器中的概念，用js对象表示页面上的元素，并提供了操作dom对象的api
2）什么是react中的虚拟dom
是框架的概念，是程序员用js对象来模拟页面上的dom和dom嵌套
3）为什么要实现虚拟dom
为了实现页面中，dom元素的高校更新
4）dom和虚拟dom的区别
dom:浏览器中的概念，用js对象表示页面上的元素，并提供了操作dom对象的api
虚拟dom:框架中的概念，开发框架的程序员，手动用js对象来模拟dom元素和嵌套关系

本质：什么是虚拟dom:用js对象的形式，来模拟dom嵌套关系（虚拟dom是以js对象的形式存在的）
目的：就是为了实现页面元素的高效更新

从数据库请求到的数据，存放在浏览器内存中
模板引擎？art.template

列表排序
1、for循环拼接字符串
2、模板引擎本质上是拼接字符串
以上方法有什么性能上的问题？
点击排序，以上方法会将整个列表重新渲染，消耗性能

优化：按需渲染，如何只要第一行和第二行需要排序，那就重新渲染这两行

dom树的概念：
一个网页呈现的过程：
浏览器发送请求、浏览器在内存中解析dom结构，并渲染出dom树、浏览器把dom树呈现到页面
如何实现按需渲染？获取新旧dom，进行对比，得到需要按需更新的dom元素
如何获取新旧dom树？
分析：浏览器中没有获取dom树的api，所以，无法拿到dom树，可以手动拿到dom
如何手动虚拟dom

<div id="myId">hello world</div>

程序员手动模拟新旧dom，就是react中虚拟dom 的概念
2、diff算法
1）tree diff 新旧两个dom树逐层对比的过程，当整个dom对比完毕，所有按需更新的元素，一定能够找到
2）component diff 在进行tree diff 时，每一层中，组件对比
对比前后，组件类型相同，则暂时认为组件不需要更新，组件类型不同，移除旧组件，创建新组件，并追加到页面上
3）element diff 在组件对比时，如果组件类型相同，进行元素级别对比

五、创建webpack 4.x 项目
1、运行npm init -y 初始化项目
2、在项目跟目录创建src源代码目录和dist产品目录
3、在src目录下创建index.html 页面模板
4、使用npm安装webpack,运行 npm i webpack -D
5、webpack 4.x 提供了约定大于配置的概念；目的是尽量减小配置文件的体积
默认约定了配置
打包入口是src -> index.js js入口点

1、这两个导入的时候，接受的成员名称，必须这么写(导入包)

import React from 'react'   //创建组件、虚拟dom元素、声明周期
import ReactDOM from 'react-dom'   //把创建好的组件和虚拟dom放到页面上展示

2、创建虚拟dom元素
参数1：创建元素的类型，字符串，表示元素的名称
参数2：是一个对象或null，表示当前这个dom元素的属性
参数3：子节点（包括其他虚拟dom 获取文本子节点）
参数n:其他子节点

<div id="myId" title="this is a h1">hello world</div>
const myh1 = React.createElement('h1',null,'这是一个h1')  //创建虚拟dom元素

3、使用reactDom把虚拟dom渲染到页面
参数1：要渲染的那个虚拟dom元素
参数2：指定页面上的一个容器(dom元素，而不是选择器)

 ReactDOM.render(myh1,document.getElementById('app'))   //调用render函数渲染

渲染页面上的dom结构，最好的方式，就是写HTML代码
注意：在js文件中，不能使用类似HTML标记，否则打包失败
可以使用babel来转换这些js中的标签
这种在js中，混合写入类似HTML的语法，叫做jsx语法，符合xml规范的js
jsx本质还是在运行时被转换成 React.createElement形式执行

const mydiv = <div id="myId" title="this is a h1">hello world</div>

打包的输出文件是dist -> main.js

创建react项目
创建 npm create-react-app my-app
cd my-app
运行 npm start

六、jsx语法
jsx允许在大括号中嵌入任何表达式

const element = <h1>Hello, world!</h1>;

这个有趣的标签语法既不是字符串也不是 HTML。
它被称为 JSX，是一个 JavaScript 的语法扩展。在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。
声明变量

const name = 'json'
const element = <h1>hello,{name}</h1>

在 JSX 语法中，你可以在大括号内放置任何有效的 JavaScript 表达式。

元素渲染
元素是构成react应用的最小砖块
更新已渲染的元素
react元素是不可变对象，一旦被创建，就无法改变它的子元素或属性。一个元素代表某特定时刻的ui
更新唯一的方法是创建一个全新的元素，并将其传入ReactDOM.render()

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
每秒更新一次

let time = 120
function tick(){
  const mydiv = (
    <div>
      <h1>Hello, world!</h1>
      <h2>倒计时 {time--} 秒</h2>
    </div>
  )
  ReactDOM.render(mydiv, document.getElementById('example'))
}
setInterval(tick, 1000);
//倒计时

渲染数字
渲染字符串
渲染布尔值
为属性绑定值
渲染数组
渲染字符串数组 forEach map

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="../build/react.development.js"></script>
    <script src="../build/react-dom.development.js"></script>
    <script src="../build/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      const a = 10
      const str = "你好，中国"
      const bool = false
      const title = 111
      let list = [
        <p key="1">apple</p>,
        <p key="2">pear</p>
      ]
      let arrStr = ['apple','orange','banana']

      //定义一个空数组
      const nameArr
      arrStr.forEach(item =>{
        const temp = <h5>{item}</h5>
        nameArr.push(temp)
      })
      ReactDOM.render(
        <div>
          <div>{a + 2}</div>
          <hr/>
          <div>{str}</div>
          <hr/>
          <div>{bool ? '条件为真' : '条件为假'}</div>
          <hr/>
          <div title={title}>这是一个div</div>
          <hr/>
          <div>
            {list}
          </div>
          <hr/>
          <div>
            {nameArr}或
            {arrStr.map(item => {
              return <h5>{item}</h5>
            })}
          </div>
        </div>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

React 只更新它需要更新的部分
React DOM 会将元素和它的子元素与它们之前的状态进行比较，并只会进行必要的更新来使 DOM 达到预期的状态。
在什么情况下使用{}
当我们在jsx控制的区域内，写js表达式，需要把js代码放到{}中

七、key
react利用key来识别组件，他是一种身份标识，就像每个人有一个身份证来做辨识一样。每个key 对应一个组件，相同的key react认为是同一个组件，这样后续相同的key对应组件都不会被创建

key帮助react识别那些元素改变了，如添加和删除。所以给数组中给个元素赋予一个确定的标识
一个元素的key最好是这个元素列表中拥有独一无二的字符串，通常用id
没有id时，可用index => 列表项目顺序发生变化时，不建议使用index作为key值，会导致性能降低，而且可能引起租价组件状态问题

用key提取组件元素的key只有放在就近的数组上下文中才有意义
key只是在兄弟节点之间必须唯一

作用：1、提高渲染效率
2、删除或增加数据是的标识
v-for和map 使用时要加key
数组添加或删除时
在react中，key添加给被forEach或map或for遍历的元素

数组或迭代器中的每个子元素都应该有一个唯一的“key”

let list = [
    <p key="1">山有木兮木有枝</p>,
    <p key="2">心悦君兮君不知</p>
]

八、注释
花括号里可以写任何js表达式，注释也是js代码
{/* */} （多行）
{
// （换行，单行）
}

九、添加类名时，用className 代替 class
htmlFor 代替 for（label中的for）
这里for和class都是关键字

十、创建组件的两种方式

构造函数方式创建（函数名首字母大写）

function Hello(){
  //return null  如果在组件中返回一个null，表示不返回什么
  //必须返回一个合法的jsx虚拟dom元素
  return <h2>hello，world</h2>
}

vue和react中的props永远是只读的，不能重新赋值

react写小demo

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <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://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <style>
      .content{
        width: 300px;
        height: 500px;
        /* background-color: #ededed; */
        position: absolute;
        left: 50%;
        margin-left:-150px;
        padding: 15px;
        box-sizing: border-box;
        border: 1px solid #ededed;
      }
      .seacher{
        width: 100%;
      }
      .content-detail{
        width: 100%;
        margin-top: 10px;
      }
      .title{
        width: 50%;
        height: 30px;
        display: inline-block;
        /* background: skyblue; */
      }
      .goods-name{
        font-weight: 800;
      }
    </style>
    <script type="text/babel">
    const goods = [
                    {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
                    {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
                    {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
                    {category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
                    {category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
                    {category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
                  ]
      let sporting = []
      goods.map((item,index)=>{
        if(item.category=='Sporting Goods'){
          item.id = index
          sporting.push(item)
        }
      })

      let electronics = []
      goods.map((item,index)=>{
        if(item.category=='Electronics'){
          item.id = index
          electronics.push(item)
        }
      })
      console.log(sporting,electronics)
      function Seacher(){
        return <div className="seacher">
          <input type="text" placeholder="Seach..."/>
          <br/>
          <input type="checkbox"/> Only show products in stock
          </div>
      }
      function Content(){
        return <div className="content-detail">
          <div className="title">Name</div>
          <div className="title">price</div>
          <Sporting/>
          <Electronics/>
        </div>
      }

      function Sporting(){
        return <div className="good">
              <div className="goods-name">Sporting Goods</div>
              {sporting.map(item=>{
                return <div className="goods" key={item.id}>
                  <div className="title name">{item.name}</div>
                  <div className="title price">{item.price}</div>
                </div>
              })}
          </div>
      }
      function Electronics(props){
        return <div className="good">
              <div className="goods-name">Electronics</div>
              {electronics.map(item=>{
                return <div className="goods" key={item.id}>
                  <div className="title name">{item.name}</div>
                  <div className="title price">{item.price}</div>
                </div>
              })}
          </div>
      }
      
      function Container(){
        return <div className="content">
          <Seacher/>
          <Content/>
        </div>
      }
      ReactDOM.render(
        <Container></Container>,
        document.getElementById('root')
      );
    </script>
  </body>
</html>

十一、样式的写法

（1）内部样式在页面中书写
react写样式时，class改为className

<div  className="text">
<pre>
    静夜思
        李白
床前明月光，疑似地上霜。
举头望明月，低头思故乡。
</pre>
</div>

（2）内联样式
style={{color:'red'}} 需要两个大括号表示键值对，值是字符串的话需要用引号。（一个大括号表示书写表达式）

（3）定义样式对象

 var styleObj = {
    color:"blue",
    fontSize:40,
    fontWeight:"normal"
}

style={styleObj} //引用

(4)可以在js文件中写样式

export default{
    item: {border: '1px dashed #ccc', margin: '10px', padding: '10px', boxShadow: '0 0 10px #ccc'},
    user: {fontSize: '14px'},
    content: {fontSize: '12px'}
}

12、组件组件名称必须以大写字母开头。

函数定义
function Welcome(props){
return

Hello,{props.name}

}
es6的class来定义组件
class Message extends React.Component{
render(){
return

Hello,{this.props.name}

}
}

以上两个组件在react中等效

渲染组件

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

或

ReactDOM.render(
  <div>
    <Welcome name="中国"></Welcome>
  </div>,
  document.getElementById('example')
);

组件组合
创建一个可以多次渲染 Welcome 组件的 App 组件：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

组件创建到完成渲染过程
我们调用 ReactDOM.render() 函数，并传入作为参数。
React 调用 Welcome 组件，并将 {name: ‘Sara’} 作为 props 传入。
Welcome 组件将

Hello, Sara

元素作为返回值。
React DOM 将 DOM 高效地更新为

Hello, Sara

React 非常灵活，但它也有一个严格的规则：所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

13、state和生命周期
state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。而子组件只能通过 props 来传递数据。

State 与 props 类似，但是 state 是私有的，并且完全受控于当前组件。

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

14、事件处理
react事件命名采用小驼峰式，而不是纯小写
使用jsx语法时，需传入一个函数作为事件处理函数，而不是一个字符串

传统的 HTML：

<button onclick="activateLasers()">
  Activate Lasers
</button>

在 React 中略微不同：

class Clock extends React.Component {
  add = () =>{
    console.log('e',this)
  }

  render() {
    return (
      <button onClick={this.add}>click me</button>
    );
  }
}

在 React 中另一个不同点是你不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault 。

<a href="#" onclick="console.log('The link was clicked.'); return false">
  Click me
</a>

在 React 中，可能是这样的：

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

drunk喵咪

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
react语法

一、库和框架库：小而巧优点：可以方便的很方便的从一个库切换到另一个库，但代码基本不变框架：大而全优点：框架提供了一整套的解决方案，所以，在项目中切换到另外的框架比较困难二、react与vue对比组件化方面：1、什么叫模块化是从代码角度进行分析；把一些可复用的代码，抽离为单个模块；便于项目的维护和开发2、什么叫组件化是从ui界面进行分析；把可复用的ui元素，抽离为单独的组件；便于项目的维护和开发3、组件化好处随着项目规模的增大，组件越来越多，方便把现有组件拼接成完整项目4、vue
复制链接

扫一扫