0
点赞
收藏
分享

微信扫一扫

自学react文档笔记01

诗远 2022-04-02 阅读 52
前端javascriptreact.js

是选择ToduList的文档

Tools and testing - Learn web development | MDN

原文的翻译对我这个小白真的很难，结合了这个大哥的文章学习的。

这个是链接

React开发入门：以开发Todo List为例 - iltonmi - 博客园 (cnblogs.com)

JSX是什么？

一句话来说就是长得很像HTML的JavaScript代码，简称js语法的类HTML扩展

const header = (
  <header>
    <h1>Mozilla Developer Network</h1>
  </header>
);

真实的样子其实是

const header = (
  <header>
    <h1>Mozilla Developer Network</h1>
  </header>
);

这个是jsx编译出的结果，浏览器直接解析.

初始化APP

npx create-react-app moz-todo-react

这样就产生了一个叫moz-todo-react的一个react项目

src里面是源码

public包含在开发APP过程中，浏览器需要读取的文件；index.html是最重要的文件

第一个React组件

在react中，component是一个代表APP某部分的课重用的模块。

App.js由三个主要部分组成：顶部的import，中间的App组件，底部的export

// 第一个语句导入React库本身。因为React将我们写入的JSX转换为React.createElement()，所以所有的React组件都必须导入React模块。如果跳过这一步，应用程序将产生一个错误。
import React from 'react';
// 注意./被使用在路径的开头，.svg扩展名在路径的结尾——这告诉我们文件是本地的，而且这不是JavaScript文件。
import logo from './logo.svg';
// 第三条语句导入了与我们的App组件相关的CSS。
import './App.css';

// 这个App函数返回一个JSX表达式。这个表达式定义了浏览器渲染到DOM的内容。
function App() {
  return (
    // 表达式中的某些元素具有属性，这些属性的编写方式与HTML类似，遵循attribute="value"的模式。
    // <div>标签有一个className属性。这与HTML中的class属性相同，但因为JSX是JavaScript，所以我
    //们不能使用class这个词——它是保留的，这意味着JavaScript已经将它用于特定目的，这将在我们的代码中引起问题。
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Hello, World!
        </p>
      </header>
    </div>
  );
}

// 在App.js文件的最底部，export default App语句使我们的App组件可以被其他模块使用。
export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

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

用来调用React的ReactDOM.render（）函数，有两个参数：

        1.被渲染的组件，这里是<App/>

        2.被渲染的DOM元素，在本例中是ID为root的元素这个元素就在index.html内。

变量和props

JSX中的变量

注意App.js文件中的这一行

<img src={logo} className="App-logo" alt="logo" />

这里，<img/>标签的src属性值用花括号括起来。

JSX就是这样识别变量的

使用自定义变量，定义say Hello的一个对象subject:

注意第二行，然后文本里面p标签的内容就是Hello,React了

function App() {
  const subject = "React";
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Hello, {subject}!
        </p>
      </header>
    </div>
  );
}

组件的props

这个我不知道怎么翻译，原文档说是叫道具

prop是传递到React组件中的任何数据。React props与HTML属性类似。HTML元素有属性，React组件有props。

props是在组件调用时直接定义和初始化的，使用与HTML属性相同的语法^属性名-属性值^

也就是prop=“value”。

在react中，数据流向是单向的：props只能从父组件向下传递到子组件；props是只读的

使用实例

打开index.js，在调用<App/>时，直接定义和初始化props。

ReactDOM.render(<App subject="Clarice">,document.getElementById('root'))

在App.js中，去接收props（subject=“Clarice”）

props里面有subject这个属性，所以直接调用就可以了

function App(props){
    const Subject = props.subject;
    return(
        
    )
}

小结（React基本概念）

  • 组件可以import需要的module,且必须在文件底部export自己。
  • 组件函数使用帕斯卡命名法。就是驼峰法的第一个字母也大写
  • 您可以通过将变量放在花括号之间，在jsx中读取他们，比如{so}这样就是一个变量了
  • 为了不与JavaScript保留字冲突，一些JSX属性与HTML属性不同。例如，HTML中的class转换为JSX中的className，很多单词都是驼峰法的
  • Props就像HTML属性一样，在组件调用时被初始化，并被传递到组件中。

常用特性

迭代（循环遍历）渲染

需求如下：Todo List会由很多代办事项，Todo item组成。通过迭代渲染，我们可以很优雅的渲染一系列的Todo 组件

通常是拿一个对象数组去渲染一段jsx内容，再把遍历完成后的内容放到需要的地方

先初始化<Todo/>

const taskList = props.tasks.map(task => (
    <Todo id={task.id} name={task.name} completed={task.completed}/>
))

这段代码实现的就是把一个叫做tasks的一堆内容的属性去用数组方法遍历，再把遍历完成之后的内容全部放到叫<Todo/>的jsx内容中

而这里面的tasks的内容是这样的，他是被放在index.js里面

const DATA = [
  { id: "todo-0", name: "Eat", completed: true },
  { id: "todo-1", name: "Sleep", completed: false },
  { id: "todo-2", name: "Repeat", completed: false }
];

随后再在同文件下的渲染部分把tasks放到组件里，就像这样

ReactDOM.render(<App tasks={DATA} />, document.getElementById("root"))

现在回到组件里面，把之前循环过了的jsx内容一起放到return的组件内容里，去完成最终的渲染

<ul
  role="list"
  className="todo-list stack-large stack-exception"
  aria-labelledby="list-heading"
>
  {taskList}
</ul>

唯一key

  • 现在React将我们的代办事项从一个数组中渲染出来，为了正确的完成渲染，React必须记录并正确地区分他们。
  • 我们需要传递一个key的props去帮组React记录每一项
  • key是React管理的一个特殊props不能将key值用于其他任何目的
const tasklist = props.tasks.map(task =>(
        <Todo
            id={task.id}    
            name={task.name}
            completed={task.completed}
            key={task.id}
        />
    )
)

处理事件

需求：处理新增Todo事项的表单提交

在React中，我们直接在JSX中的元素上编写处理器

<button
    type="button"
    onClick={()=>alert("say hi!")}    
>
Say hi
</button>

这些直接写的事件其实并不是那种内联事件，因为归根结底jsx是JavaScript的一部分。

onClick属性的意义：

  • 他使得React，在用户单击按钮时运行一个给定的函数。
  • onClick的camelCase非常重要--JSX不会识别onclick（同样，它已经在JavaScript中用于特定目的，这与标准的onClick处理程序属性相关又不同）
  • 在JSX中看，所有的浏览器事件都遵循这种格式：on + 事件的名称

处理表单提交

先创建一个表单组件

再在上面加上这样一段代码

function handleSubmit（e）{
        e.preventDefault（）；
        alert（‘Hello，world！’）；
}

然后可以在return的jsx内容里写一个表单，现在应该是长这样。

function Form(props){
    // 阻止冒泡加上alert
    // 这里再加上在index.js里面的一个方法（回调）
    function handleSubmit(e){
        e.preventDefault();
        props.addTask('Hello,world!')
    }
 
    return(
        
        <form>
           
        <button type="submit" className="btn btn__primary btn__lg">
        Add
        </button>
        </form>
    )
}

然后只需要把最开始创建的那个方法放到我们的from里面就可以了，和属性一样，写在开始标签里

最终结果应该是长这样的

function Form(props){
    // 阻止冒泡加上alert
    // 这里再加上在index.js里面的一个方法（回调）
    function handleSubmit(e){
        e.preventDefault();
        props.addTask('Hello,world!')
    }
 
    return(
        
        <form onSubmit={handleSubmit}>
           
        <button type="submit" className="btn btn__primary btn__lg">
        Add
        </button>
        </form>
    )
}

点add之后就可以有这个提交的行为了

回调（callback）props

需求：在Todo List中，我们需要一个功能：在<From/>中提交新的代办事项，然后展示在<App/>中。

这意味着，我们需要数据从子组件传递到父组件！

  • 在React应用程序中，交互性很少局限于一个组件：一个组件中发生的事件会影响应用程序的其他部分
  • 我们不能像使用标准props将数据从子组件传递到父组件那样，将数据从父组件传递到子组件。

因此，我们无法实现了吗？

不，我们可以在<App/>中编写一个函数，然后将该函数作为props传递给<From/>,该函数将从我们的<From/>中获取一些数据作为输入。

  • 这个函数prop（function-as-a-prop）被称为回调（callblack）prop。

下面我们开始实现

  1. 在App（）函数中。编写函数addTask（） 
    function addTask(name) {
  alert(name);
}

  2. 将addTask函数作为prop传入<From/> 
    <Form addTask={addTask} />

  3. 在From（）函数内部的handleSubmit方法中，调用callback prop也就是这里1的addTask方法 
    function handleSubmit(e) {
  e.preventDefault();
  props.addTask("Say hello!");
}

State和useState hook

之前我们能够使用callback prop将数据回传给父组件

需求：如何保存用户的输入内容呢？用户提交了表单之后，如何清空输入，如何更新内容呢？

  • 组件自身拥有的数据，称为State。
  • State是React的另一个强大工具,因为组件不仅拥有State，而且可以在以后，使用useState hook更新它。
  • 和State不同，prop是只读的！
  • React提供了各种特殊的功能，被称为hook，允许我们为组件提供新的能力，比如state。

使用React hook前，需要先import：

iport React,{useState}from "react";
  • useState()为组件创建一个state，它的唯一参数决定state的初始值
  • 它返回两个东西：state和一个稍后可用于更新state的函数
const [name, setName] = useState('Use hooks!');

举报

相关推荐

React黑马视频自学笔记01

javascript前端react.js

自学ajax笔记（day01）

前端javascript开发语言

React学习笔记01_React入门

react.jsjavascript学习

【前端学习——react文档】学习react文档笔记（持续更新）

kubernetesnginxlinux

React学习笔记—Day01

react.jsjavascript前端

React 测试笔记 01 - 基础 UI 类

react.jsuijavascript

自学WebAPIs（DOM+BOM）笔记（day01+02）

前端javascript开发语言

三菱fx2nPLC自学笔记01

其他硬件工程

react文档

react.js

【React】01-React的入门

react.js前端前端框架
0 条评论