React入门学习笔记

React学习笔记

安装

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

2、npm部署React环境

详情请参考官方文档

组件

Props数据传递

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

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
    }
    ...
}

初始化

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

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

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

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

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

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组件

• 函数组件

function Welcome(props) {
    return ....
}

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

• class组件

class Welcome extends React.Component {
    render() {
        return ...
    }
}

渲染组件

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

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

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

class Welcome extends React.Component {
    render() {
        return <p>{props.name} -- {props.value}</p>;
    }
}

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

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

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

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'));

提取组件

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

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>
    );
}

经过组件提取后如下

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与生命周期

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]