React的入门学习

简介: React的入门学习

React的入门学习


React 是一个声明式,高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面,这些代码片段被称作“组件”。

怎么写一个React类组件

  • 定义一个React.component的子类
  • ui的dom结构就是render函数的返回值
  • props是传给组件的属性集合
class ShoppingList extends React.component{
    render(){
        return (
            <div>{{this.props.name}}</div>
        )
    }
}
// 用法示例
<shoppingList name="Huahua"/>

render 返回了一个 React 元素(本质上就是一个对象),这是一种对渲染内容的轻量级描述。

实际内部将其转化成:

React.createElement('div', {className: 'shopping-list'},
  React.createElement('h1', /* ... h1 children ... */),
  React.createElement('ul', /* ... ul children ... */)
)

在 React 应用中,数据通过 props 的传递,从父组件流向子组件。

注意{}外面是没有引号的,表示这段代码是js代码。

事件的时候,如果写在dom上,可以用箭头函数规避this的问题。

阻止组件渲染的话,可以return null

怎么写一个函数组件

当组件里,只有render方法的时候,就该换成函数组件啦! 换言之,函数组件没有自己的state! 函数组件不需要继承React.component类!

其实就是写一个普通函数,然后返回React元素即可~~

如果需要props的话,就传一个props!

注意事件的写法发生了变化!

注意事件的写法发生了变化!

注意事件的写法发生了变化!

把原先子类的onClick={() => this.props.onClick()}改成了更短的 onClick={props.onClick}!

function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}

只有两种值的时候,可以考虑布尔值。

React元素是不可变对象

React 元素是不可变对象。一旦被创建,你就无法更改它的子元素或者属性。一个元素就像电影的单帧:它代表了某个特定时刻的 UI

想要更新的话,就是重新创建。

但注意,React元素重新创建,不代表真实的DOM重建,React是根据之前的区别,而对DOM进行必要的更新,并不是新建

怎么给组件加私有属性state

  • 组件类里面,写个constructor,定义state
  • 为了方便使用props,这边也将props传过来
class Square extends React.Component {
  construtor(props){
    super(props)
    this.state = {
      value:null
    }
  }
  render() {
    return (
      <button className="square" onClick={()=>{this.setState({value:'X'})}>
        {this.state.value}
      </button>
    );
  }
}

怎么修改私有属性state

  • setState的方法
this.setState({value:'x'})

State 的更新可能是异步的!!!

出于性能考虑,React 可能会把多个 setState() 调用合并成一个调用。

如果需要使用到上一次的state

this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

怎么将子组件的state提升为父组件的

遇到下面的情况,就要提升state:

  • 同时获取多个子组件数据
  • 两个组件之间需要相互通讯

需要把子组件的 state 数据提升至其共同的父组件当中保存。

之后父组件可以通过 props 将状态数据传递到子组件当中。

这样应用当中所有组件的状态数据就能够更方便地同步共享了。

怎么写事件

  • react的事件命名都是小驼峰
  • html元素,一般就是onClick之类
  • react组件,可以用自定义的事件
  • 如果是React类定义的组件,注意大括号里,使用箭头函数
  • 如果是函数组件,注意不用箭头函数
// react类定义的组件的话
<button onClick={(e)=>this.props.onClick(e)}}>
<Square value={this.state.squares[i]} onClick={(e)=>this.handleClick(i,e)}/>;
// 函数组件的话
<button onClick={props.onClick}>

怎么让子组件修改父组件的私有属性state

  • 子组件内部,事件绑定的时候,让this.props.xx[event]执行
  • 父组件给子组件传相应事件,这个事件绑定的函数里是修改逻辑,因为写在父组件里,所以容易修改
// 父组件里
<Square value={this.state.squares[i]} onClick={()=>this.handleClick(i)}/>;
handleClick(i){
    const squares = this.state.squares.slice()
    squares[i] = 'X'
    this.setState({squares})
}
// 子组件里
<button onClick={()=>this.props.onClick()}}></button>

注意修改属性的时候,不要动原始的数组,而是要复制一份出来,在修改。

数据不可变的好处:

  • 简化复杂的功能,比如撤销和恢复的功能
  • 跟踪数据的改变。如果直接修改数据则需要和之前的版本比较,但跟踪不可变数据的话,发现对象变成一个新对象的话,就说对象发生了改变
  • 确定React中何时重新渲染。不可变性最主要的优势在于它可以帮助我们在 React 中创建 pure components。我们可以很轻松的确定不可变数据是否发生了改变,从而确定何时对组件进行重新渲染。

列表渲染:map

一般通过某数据列表生成元素的时候,会使用map。 而且,一般提前通过变量得到,。

const history = this.state.history.map((item,index)=>{
      const desc = index === 0?'Go to game start':`Go to move #${index+1}`;
      return (
        <li key={index}>{desc}</li>
      )
    })
 render(){
    return (
        <ol>{history}</ol>
    )
 }

动态列表,要指定key

每当一个列表重新渲染时,React 会根据每一项列表元素的 key 来检索上一次渲染时与每个 key 所匹配的列表项。

  • 如果 React 发现当前的列表有一个之前不存在的 key,那么就会创建出一个新的组件。
  • 如果 React 发现和之前对比了一个 key,那么就会销毁之前对应的组件。
  • 如果一个组件的 key 发生了变化,这个组件会被销毁,然后使用新的 state 重新创建一份。

key 是 React 中一个特殊的保留属性(还有一个是 ref,拥有更高级的特性)。

当 React 元素被创建出来的时候,React 会提取出 key 属性,然后把 key 直接存储在返回的元素上。

虽然 key 看起来好像是 props 中的一个,但是不能通过 this.props.key 来获取 key。 React 会通过 key 来自动判断哪些组件需要更新。组件是不能访问到它的 key 的。

如果你没有指定任何 key,React 会发出警告,并且会把数组的索引当作默认的 key。但是如果想要对列表进行重新排序、新增、删除操作时,把数组索引作为 key 是有问题的。

组件的 key 值并不需要在全局都保证唯一,只需要在当前的同一级元素之间保证唯一即可。

静态列表是可以将索引作为key的

其他

  • 开发者工具查看react元素:chrome浏览器的插件React Devtools
  • 组件的生命周期:componentDidMount是组件第一次被渲染到 DOM 中的时候,componentWillUnmount是当 DOM 中组件被删除的时候
  • 怎么不改变原数组的情况下,复制数组和给数组添加元素:slice()arr.concat(item)
  • 某数据存在的话,才渲染元素:&&运算符:{count && <h1>{count}</h1>}
  • 特殊的属性:JSX 里的 class 变成了 className,而 tabindex 则变为 tabIndex。key和ref是保留属性。
  • 包含验证、追踪访问字段以及处理表单提交的解决方案,可以尝试formilk

引用

目录
相关文章
|
6天前
|
前端开发 API UED
怎么学习React 18 进行项目开发?
【4月更文挑战第18天】学习React 18涉及新特性如并发模式、Suspense API和自动批处理更新,可提升性能和用户体验。首先了解这些新特性,然后掌握React基础知识,如组件化、JSX、props和state。使用Create React App创建项目,学习如何启用并发模式和使用Suspense显示占位符。实现自定义组件,关注props传递、状态管理和事件处理。通过Profiler优化性能,利用懒加载和代码分割减少加载时间,使用Context API共享状态。不断实践和探索,参考官方文档与社区资源,以提高开发技能。
102 3
|
6天前
|
前端开发 JavaScript API
如何学习react
【4月更文挑战第9天】 学习React前,需掌握JavaScript基础,了解React的JSX、组件、props、state和生命周期等概念。安装Node.js和npm,用Create React App搭建环境。学习核心API,如React.createElement、React.render等,并阅读官方文档。实践项目,从Todo List开始,逐渐挑战复杂应用。同时,学习相关技术如Redux、React Router,并参与社区交流,持续关注React新发展。持之以恒,祝学习顺利!
29 10
|
6天前
|
前端开发 JavaScript
react学习(Effect)
react学习(Effect)
25 3
|
6天前
|
前端开发 JavaScript 开发者
React:JSX语法入门
React:JSX语法入门
29 0
|
6天前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架,使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始,介绍React Native的基础知识和开发流程,帮助读者快速入门React Native开发,并实现一个简单的ToDo应用程序。
|
6天前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
|
6天前
|
存储 前端开发 JavaScript
从零开始学习React Native开发
【2月更文挑战第1天】React Native是一种跨平台的移动应用程序框架,可以使用JavaScript和React来构建Android和iOS应用程序。本文将带您从零开始学习React Native开发,涵盖了基础知识、组件、样式、布局、API等方面。
|
6天前
|
前端开发 JavaScript 索引
快速掌握 React 基础入门: 一个完整的指南(三)
快速掌握 React 基础入门: 一个完整的指南
|
6天前
|
前端开发 JavaScript
快速掌握 React 基础入门: 一个完整的指南(二)
快速掌握 React 基础入门: 一个完整的指南
|
6天前
|
前端开发 JavaScript Linux
快速掌握 React 基础入门: 一个完整的指南(一)
快速掌握 React 基础入门: 一个完整的指南

热门文章

最新文章