前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React入门学习笔记

React入门学习笔记

作者头像
Mirror王宇阳
发布2020-12-16 17:28:07
2.5K0
发布2020-12-16 17:28:07
举报
文章被收录于专栏:Mirror的技术成长

React学习笔记

安装

1、通过js文件引入React的js文件

2、npm部署React环境

详情请参考官方文档

组件

Props数据传递

数据可以通过Props在两个组件间传递(父组件流向子组件)

代码语言:javascript
复制
class Square extends React.Component {
    render() {
        return (
            <button className="square">
                {this.props.value}  
            </button>
        );
    }
}

class Board extends React.Component {
    renderSquare(i) {
        return <Square value={i} />; // 这里就会把i传递给Square
    }
    ...
}

初始化

代码语言:javascript
复制
class Square extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: null,
        }
    }

    render() {
        return (
            <button className="square" 
                    onClick={()=>this.setState({value:'X'}) }>
                {this.state.value}  
            </button>
        );
    }
}

这里的constructor()初始化了props,state.value=null;当点击后,state.value=X;

每当state发生变化,就会重新渲染子组件。

简单的JSX

代码语言:javascript
复制
const element = <h1>Hello,React!</h1> ;

JSX是Javascript的语法扩展,在React配合使用JSX可以很好的描述UI。JSX具备JavaScript的全部功能。

JSX可以生成React元素,将这些元素渲染为DOM。

JSX语法中,可以在大括号内放置任何有效的JS表达式;

代码语言:javascript
复制
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

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

ReactDOM.render(element, document.getElementById('root'));

React元素是不可变对象,创建后无法改变Ta的子元素/属性;想要改变元素只有重新渲染创建一个权限的元素并传入ReactDOM.render()

ReactDOM会将元素和子元素与ta们的状态进行比较,并只会进行必要的更新来使DOM达到预期。

组件

组件类似于一个类对象,将可独立且复用的代码片段进行独立构造成一个组件,调用该组件即可实现代码复用。

函数组件与class组件

  • 函数组件
代码语言:javascript
复制
function Welcome(props) {
    return ....
}

welocme()函数是一个React函数组件,接收带有数据的props对象并返回一个React元素。

  • class组件
代码语言:javascript
复制
class Welcome extends React.Component {
    render() {
        return ...
    }
}

渲染组件

React元素支持用户自定义的组件:

代码语言:javascript
复制
const element = <Welcome name="demo" />

React元素为自定义组件,JSX所接收的属性、子组件转换为单个对象props传递给组件。

代码语言:javascript
复制
class Welcome extends React.Component {
    render() {
        return <p>{props.name} -- {props.value}</p>;
    }
}

const element = <Welcome name="demo" value="demo.." />

React会将以小写字母开头的组件视为原生DOM标签

渲染输出显示,组件可以引用其它组件。

代码语言:javascript
复制
class Welcome extends React.Component {
    render() {
        return <p>{props.name} -- {props.value}</p>;
    }
}

class App() extends React.Component {
    render() (
        <div>
            <Welcome name="one" value="1"/>
            <Welcome name="two" value="2"/>
        </div>
    );
}

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

提取组件

如果我们写了一个非常非常重的组件,则可以依照层次结构提取组件变为多个小组件。

代码语言:javascript
复制
function Comment(props) {
    return (
        <div className="Comment">
            <div className="UserInfo">
                <img className="Avatar"
                    src={props.author.avatarUrl}
                    alt={props.author.name}
                />
                <div className="UserInfo-name">
                    {props.author.name}
                </div>
            </div>
            <div className="Comment-text">
                {props.text}
            </div>
            <div className="comment-date">
                {formatDate(props.date)}
            </div>
        </div>
    );
}

经过组件提取后如下

代码语言:javascript
复制
function Avatar(props) {
    return (
        <img className="Avatar"
            src={props.user.avatarUrl}
            alt={props.user.name}
        />
    )
}

function UserInfo(props) {
    return (
        <div className="UserInfo">
            <Avatar user={props.user} />
            <div className="UserInfo-name">
                {props.user.name}
            </div>
        </div>
    )
}

function Comment(props) {
    return (
        <div className="Comment">
            <UserInfo user={props.author} />
            <div className="Comment-text">
                {props.text}
            </div>
            <div className="comment-date">
                {formatDate(props.date)}
            </div>
        </div>
    );
}

组件无论如何都不能修改自身的props;React灵活允许接收自定义的传参,但绝不允许props被更改。

state与生命周期

代码语言:javascript
复制
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Clock extends React.Component {
    // class构造函数。为this.state赋值
    constructor(props) {
        super(props);
        this.state = {
            date : new Date()
        };
    }
    // 组件被渲染到DOM后运行(挂载执行)
    componentDidMount() {
        // 设置计时器
        this.timerID = setInterval(
            () => this.tick(),
            1000
        );
    }
    // 组件从DOM移除后运行(卸载执行)
    componentWillUnmount() {
        // 清楚计时器
        clearInterval(this.timerID);
    }
    

    tick() {
        // 修改state
        this.setState({
            date : new Date()
        });
    }

    render() {
        return (
            <div>
                <h1></h1>
                <p>It is {this.state.date.toLocaleTimeString()}</p>
            </div>
        );
    }

}

ReactDOM.render(
    <Clock />,
    document.getElementById('root')
);
  • 正确使用State

1、不能直接修改State,需要调用this.setState()方法来修改。

2、State属于异步更新、合并更新,因为是调用同一个方法来更新数据,所以会存在合并异步更新的情况。

3、数据是向下流动的,子无法直接向父传递数据;每一个组件的state是局部封装,如果需要可以作为props向下传递到子组件。

事件处理

1、React的事件命名采用小驼峰式

2、使用JSX语法时,需要传入一个函数作为事件处理函数而不是字符串

3、阻止事件不可返回false方式,必须显式的使用preventDefault

条件渲染

React使用JS的运算符去创建元素来表示状态。

可以使用变量来存储元素,有条件的渲染组件的一部分内容。

列表和key

我们可以使用map去遍历一个数组然后返回一个带有li标签的“列表”数组,我们则可以成功的渲染一个列表;但是由于React的约束要求,我们的列表元素中必须包括一个特殊的key属性。

key帮助React识别元素的改变(增/删/改),故此需要给数组中的没一个li元素一个确定的同层唯一标识。

受控组件

在HTML表单元素中,表单元素会自己维护自己的状态而在React中可变状态通常是有state属性控制的,并且只可以使用setState()更新属性;为了适应React的state成为“唯一数据源”,渲染表单的组件还控制着输入过程中表单发生的操作,被React以这种方式控制取制的表单输入元素称之为“受控组件”。

React文档中也指出React对表单的受控组件处理比较烦杂,而且存在非受控组件;官方给出了推荐[Formik]

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-12-12 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • React学习笔记
    • 安装
      • 组件
        • 简单的JSX
          • 组件
            • 事件处理
              • 条件渲染
                • 列表和key
                  • 受控组件
                  领券
                  问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档