2023年2月7日
React的一些基础概念及jsx语法.

未来一段时间里,将会快速学习一下React框架,并能尝试开发一些小型项目.巩固一些前端知识.

React介绍

声明式

React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。

以声明式编写 UI，可以让你的代码更加可靠，且方便调试。

组件化

创建拥有各自状态的组件，再由这些组件构成更加复杂的 UI。

组件逻辑使用 JavaScript 编写而非模版，因此你可以轻松地在应用中传递数据，并使得状态与 DOM 分离。

一次学习，随处编写

无论你现在正在使用什么技术栈，你都可以随时引入 React 来开发新特性，而不需要重写现有代码。

React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。

安装

npx create-react-app my-app

• npx 临时安装包,然后初始化项目后会自动清除,避免全局安装.

JSX介绍

概念: jsx是JavaScript xml的缩写,表示在js中写html结构.

在jsx中使用js表达式

语法:
{ js 表达式 }

if,switch-case 语句,变量声明语句,这些称为语句,不是表达式,不能出现在{}中.

App.js:

const name="xiangyang"
// 1.识别常规的变量
// 2.原生的js方法调用
// 3. 三元运算符

const flag=true;


function App() {
  return (
    <div className="App">
      <h1>Hello,{ name }</h1>
      { flag ? 'good':'bad' }
    </div>
  );
}
export default App;

jsx列表渲染

实现: 使用数组的map方法

key仅仅在内部使用,不会出现在页面里.

const ulist=[
  {id:1,name:"xxx"},
  {id:2,name:"xxxxx"},
  {id:3,name:"xxxxxxx"},
]

<ul>
  { ulist.map(ulist=><li key={ulist.id}>{ulist.name}</li>)}
 </ul>

jsx条件渲染

实现:

• 三元表达式
• 逻辑&&运算

      {flag?<span>Hello</span>:null}
      { true && <p>xxxxx</p>}

模板精简原则

模板中的逻辑尽量保持精简
复杂的多分支逻辑,收敛为一个函数,通过专门的函数来写分支逻辑,模板只负责调用.

jsx样式处理

• 行内样式.内联样式: 在元素上绑定style属性.
• 类名样式

import "./app.css";

const style={
  color:"red",
  fontSize:"20px"
}

function App() {
  return (
    <div className="App">
      <span style={style}>万紫千红</span>
      <span className="test">万紫千红</span>
    </div>
  );
}
export default App;

动态控制类名

const activFlag=true;
//.............
 <span className={activFlag?'test':''}>万紫千红</span>

jsx注意事项

• jsx必须有一个根节点,如果没有根节点,可以使用<></>代替
• 所有标签必须形成闭合,成对闭合或自闭合都可以
• jsx的语法更贴近js语法,属性名推荐 驼峰法
• jsx支持多行,如果需要换货,使用()包括.