终极 Reactjs 备忘单：轻松掌握 Reactjs⚛️

百变鹏仔 3个月前 (09-19) #CSS

文章标签轻松

介绍

react.js 已成为现代 web 开发中用于创建交互式和动态用户界面的主要内容。其基于组件的架构通过提供声明性 ui 并利用虚拟 dom 的概念，简化了单页应用程序 (spa) 的开发。本备忘单旨在指导您了解 react.js 的基本知识，从了解基础知识到掌握高级技术。无论您是初学者还是希望提高自己的技能，本指南都是您掌握 react.js 的首选资源。

1. 了解 react.js 的基础知识

组件： react 应用程序的构建块，组件封装了 ui 元素的结构和行为。它们可以简单也可以复杂，并且可以提高可重用性。

function welcome(props) {  return <h1>hello, {props.name}</h1>;}

jsx (javascript xml)： jsx 允许您直接在 javascript 代码中编写类似 html 的语法，使其更直观、更易于使用。

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

虚拟 dom：react 的 virtual dom 是实际 dom 的轻量级副本，它允许高效的更新和渲染，从而提高应用程序性能。

2. 必要的工具和库

babel： 一个 javascript 编译器，使您能够编写现代 javascript 代码（包括 jsx），并将其转换为浏览器兼容的版本。

// babel transforms this jsx:const element = <h1>hello, world!</h1>;// into this:const element = react.createelement('h1', null, 'hello, world!');

webpack： 一个模块捆绑器，可帮助管理项目资产和依赖项，优化它们以实现高效加载。

redux： 一个状态管理库，可确保一致且可预测的应用程序状态，通常与 react.js 一起使用。

import { createstore } from 'redux';function reducer(state = {}, action) {  switch (action.type) {    case 'increment':      return { count: state.count + 1 };    default:      return state;  }}const store = createstore(reducer);

3. 功能组件和钩子

函数式组件是简单、可重用的函数，它们接受 props 并返回 jsx。它们因其简单性和易于测试而受到青睐。通过使用 react hooks，您可以管理功能组件内的状态和生命周期方法，使它们更加强大。

import react, { usestate } from 'react';function counter() {  const [count, setcount] = usestate(0);  return (    <div>      <p>you clicked {count} times</p>      <button onclick="{()"> setcount(count + 1)}&gt;click me</button>    </div>  );}

关键挂钩：

useeffect(() =&gt; {  document.title = `you clicked ${count} times`;}, [count]);

4. 使用 jsx

jsx 允许您将类似 html 的语法与 javascript 表达式混合在一起。此功能使您的组件更加动态和交互。使用 jsx 有条件地渲染元素、映射数组以及将变量直接嵌入到您的 ui 中。

const user = {  firstname: 'harper',  lastname: 'perez'};const element = (  <h1>    hello, {formatname(user)}!  </h1>);

5. 属性（道具）

props 是一种将数据从父组件传递给子组件的方法，使您能够控制子组件的行为和外观。 props 使您的组件可重用且可维护。

function greeting(props) {  return <h1>hello, {props.name}</h1>;}// usage<greeting name="sara"></greeting>

6. react 中的样式

内联样式：使用 javascript 对象直接在组件中定义样式。内联样式可以根据组件状态或 props 动态调整。

const divstyle = {  color: 'blue',  backgroundcolor: 'lightgray',};function styledcomponent() {  return <div style="{divstyle}">styled with inline css</div>;}

css-in-js 库： styled components 或 emotion 等库允许您在 javascript 代码中编写 css，将样式和逻辑封装在一起以实现更好的可维护性。

import styled from 'styled-components';const button = styled.button`  background: palevioletred;  color: white;  font-size: 1em;  margin: 1em;  padding: 0.25em 1em;  border: 2px solid palevioletred;  border-radius: 3px;`;

7. 状态管理

状态是控制组件行为和渲染的数据。使用 usestate 钩子来管理本地组件状态，并使用 setstate 在状态改变时触发重新渲染。

function example() {  const [state, setstate] = usestate({ count: 0 });  return (    <div>      <p>you clicked {state.count} times</p>      <button onclick="{()"> setstate({ count: state.count + 1 })}&gt;        click me      </button>    </div>  );}

8. 处理事件

react 提供了一种通过事件处理程序处理用户交互的简单方法。将事件处理程序绑定到您的组件方法，并使用事件对象来管理用户操作，例如单击、表单提交和输入更改。

function handleclick(e) {  e.preventdefault();  console.log('the link was clicked.');}<a href="#" onclick="{handleclick}">click me</a>

9. 条件渲染

条件渲染允许组件根据特定条件渲染不同的输出。利用 javascript 的条件语句（例如 jsx 中的 if-else 或三元运算符）来动态呈现内容。

function greeting(props) {  const isloggedin = props.isloggedin;  if (isloggedin) {    return <h1>welcome back!</h1>;  }  return <h1>please sign up.</h1>;}

10.反应路由器

react router 使您能够创建具有多个视图和无缝导航的 spa。定义路线并将其链接到组件，以允许用户轻松浏览您的应用程序。它还支持动态路由和嵌套路由，增强应用导航的灵活性。

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';function App() {  return (    <router><div>        <nav><link to="/">Home          <link to="/about">About        </nav><route path="/" exact component="{Home}"></route><route path="/about" component="{About}"></route></div>    </router>  );}

结论

掌握 react.js 打开了创建强大且高效的 web 应用程序的大门。本备忘单涵盖了您需要了解的基础知识、工具和高级概念。不断练习，了解最新趋势，探索庞大的 react.js 生态系统，以作为 react 开发者继续成长。

文章推荐

终极 Reactjs 备忘单：轻松掌握 Reactjs⚛️

介绍

1. 了解 react.js 的基础知识

2. 必要的工具和库

3. 功能组件和钩子

4. 使用 jsx

5. 属性（道具）

6. react 中的样式

7. 状态管理

8. 处理事件

9. 条件渲染

10.反应路由器

结论

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写