react官网学习笔记

刺骨的言语ヽ痛彻心扉 2022-05-13 16:37 172阅读 0赞

学习地址：[https://react.docschina.org/][https_react.docschina.org]

[http://www.runoob.com/react/react-tutorial.html][http_www.runoob.com_react_react-tutorial.html]

1.react第一个实例：Hello, world!

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    </head>
    <body>
    
    <div id="example"></div>
    <script type="text/babel">
    ReactDOM.render(
    	<h1>Hello, world!</h1>,
    	document.getElementById('example')
    );
    </script>
    
    </body>
    </html>

2.React 安装

本教程使用了 React 的版本为 16.4.0，你可以在官网 https://reactjs.org/ 下载最新版。

你也可以直接使用 Staticfile CDN 的 React CDN 库，地址如下：

官方提供的 CDN 地址：

将这三个地址写到<head></head>标签内

3.元素渲染

<div id="example"></div>
        <script type="text/babel">
            //元素式构成React应用的最小单位，用于描述屏幕上输出的内容
            const element = <h1>Hello, world!</h1>;
            //要将React元素渲染到根节点中，用ReactDOM.render()方法
            ReactDOM.render(
                element,
                document.getElementById('example')
            );
        </script>

4.更新元素渲染

<div id="example"></div>
        <script type="text/babel">
            //更新元素渲染：React元素都是不可变的。当元素被创建之后，无法改变内容或属性。只能创建一个新的元素
            // toLocaleTimeString() 方法返回该日期对象时间部分的字符串
            function tick(){
                const element = (
                    <div>
                        <h1>Hello, world!</h1>
                        <h2>现在是{new Date().toLocaleTimeString()}.</h2>
                    </div>
                );
                ReactDOM.render(
                    element,
                    document.getElementById('example')
                );
            }
            setInterval(tick,1000);//通过 setInterval() 方法，每秒钟调用一次 ReactDOM.render()。

5.将要展示的部分封装起来

6.创建React.Component的类，需要注意的是在 render() 方法中，需要使用 this.props 替换 props：

class Clock extends React.Component{
                render(){
                    return(
                        <div>
                            <h1>创建一个类</h1>
                            <h2>现在是{this.props.date.toLocaleTimeString()}.</h2>
                        </div>
                    );
                }
            }
            function tick(){
                ReactDOM.render(
                    <Clock date = {new Date()} />,
                    document.getElementById("example")
                );
            }
            setInterval(tick,1000);

7.React JSX

React使用JSX来替代常规的javascript

实例中的 p 元素添加了自定义属性 data-myattribute，添加自定义属性需要使用 data- 前缀。

<div id="example"></div>
        <script type="text/babel">
            ReactDOM.render(
                <div>
                    <h1>React JSX</h1>
                    <p data-myattribute="somevalue">实例中的 p 元素添加了自定义属性 data-myattribute，添加自定义属性需要使用 data- 前缀。</p>
                </div>
                ,
                document.getElementById("example")
            );
        </script>

8.React JSX 代码可以放在一个独立文件上，例如我们创建一个 `helloworld_react.js` 文件

ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('example')
    );

9.JSX中使用javascript表达式，表达式写在\{\}中

在JSX中不能使用if else语句，但可以使用conditional(三元运算)表达式来替代

10.样式

var myStyle={
                fontSize:100,
                color:"#FF0000"
            };
            ReactDOM.render(
                <h1 style = {myStyle}>样式</h1>,
                document.getElementById("example")
            )

11.注释

注释需要写在一对花括号中

ReactDOM.render(
                <div>
                    <h1>注释</h1>
                    {/* 注释需要写在一对花括号中 */}
                </div>,
                document.getElementById("example")
            )

12.数组

JSX允许再模板中插入数组，数组会自动展开所有成员:

var arr = [1,2];
            ReactDOM.render(
                <div>{arr}</div>,
                document.getElementById("example")
            );

13.HTML标签vs.React组件

要渲染HTML标签，只需在JSX里使用小写字母的标签名:

14.React组件

向组件传值

function HelloMessage(props){
                return <h1>组件{props.name}!</h1>;
            }
            const element = <HelloMessage name="Alisa" />;
            ReactDOM.render(element,document.getElementById("example"));

复合组件

15.React State(状态)

创建一个名称扩展为React.Component的ES6类，在render()方法中使用this.state来修改当前的时间

添加一个类构造函数来初始化状态this.state，类组件应始终使用props调用基础构造函数

16.将生命周期方法添加到类中

componentDidMount() 与 componentWillUnmount() 方法被称作生命周期钩子。

在组件输出到 DOM 后会执行 componentDidMount() 钩子，我们就可以在这个钩子上设置一个定时器。

this.timerID 为计算器的 ID，我们可以在 componentWillUnmount() 钩子中卸载计算器。

17.数据自顶向下流动

所有组件都是真正隔离的

18.Props

使用props

默认props

state和Props

我们可以在父组件中设置state，并通过在子组件上使用props将其传递到子组件上

19.Props验证

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Hello React!</title>
        <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        
        <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
        
        <script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>
    </head>
    <body>
        <div id="example"></div>
        
        
        <script type="text/babel">
            var title="Alisa";//如果此处var title=123，控制器那里会报错，显示数据类型错误
            class MyTitle extends React.Component{
                render(){
                    return (
                        <h1>Hello ,{this.props.title}</h1>
                    );
                }
            }
            MyTitle.propTypes={
                title:PropTypes.string
            };
            ReactDOM.render(
                <MyTitle title={title} />,document.getElementById("example")
            )
        </script>
    </body>
    </html>

<!DOCTYPE html>
    <html lang="UTF-8">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Hello React!</title>
        <script src="https://cdn.staticfile.org/react/15.4.2/react.min.js"></script>
    	<script src="https://cdn.staticfile.org/react/15.4.2/react-dom.min.js"></script>
    	<script src="https://cdn.staticfile.org/babel-standalone/6.22.1/babel.min.js"></script>
    </head>
    <body>
        <div id="example"></div>
        
        
        
        
        <script type="text/babel">
            var title="Alisa";//如果此处var title=123，控制器那里会报错，显示数据类型错误
            var MyTitle = React.createClass({
                propTypes:{
                    title:React.PropTypes.string.isRequired,
                },
                render:function(){
                    return <h1>{this.props.title}</h1>;
                }
            });
            ReactDOM.render(
                <MyTitle title={title} />,
                document.getElementById("example")
            );
        </script>
    </body>
    </html>

更多验证器说明：

MyComponent.propTypes = {
                //可以声明prop为指定的js基本数据类型，默认情况，这些数据是可选的
                optionalArray:React.PropTypes.array,
                optionalBool:React.PropTypes.bool,
                optionalFunc:React.PropTypes.func,
                optionalNumber:React.PropTypes.number,
                optionalObject:React.PropTypes.object,
                optionalString:React.PropTypes.string,
                // 可以被渲染的对象 numbers, strings, elements 或 array
                optionalNode:React.PropTypes.node,
                //React元素
                optionalElement:React.PropTypes.element,
                //用JS的instanceof操作符声明prop为类的实例
                optionalMessage:React.PropTypes.instanceOf(Message),
                //用enum来限制prop只接收指定的值。
                optionalEnum:React.PropTypes.oneOf(["News","Photos"]),
                //可以是多个对象类型中的一个
                optionalUnion:React.PropTypes.oneOfType([
                    React.PropTypes.string,
                    React.PropTypes.number,
                    React.PropTypes.instanceOf(Message)
                ]),
                //指定类型组成的数组
                optionalArrayOf:React.PropTypes.arrayOf(React.PropTypes.number),
                //指定类型的属性构成的对象
                optionalObjectOf:React.PropTypes.objectOf(React.PropTypes.number),
                //特定shape参数的对象
                optionalObjectWithShape:React.PropTypes.shape({
                    color:React.PropTypes.string,
                    fontSize:React.PropTypes.number
                }),
                //任意类型加上"isRequired"来使prop不可空
                requiredFunc:React.PropTypes.func.isRequired,
                //不可空的任意类型
                requiredAny:React.PropTypes.any.isRequired,
                //自定义验证器。如果验证失败需要返回一个Error对象。不要直接使用"console.warn"或抛异常，因为这样"oneOfType"会失效。
                customProp:function(props,propName,componentName){
                    if(!/matchme/.test(props[propName])){
                        return new Error("Validationfailed!");
                    }
                }
            }

20.React 事件处理

React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同:

React 事件绑定属性的命名采用驼峰式写法，而不是小写。

如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)

class Toggle extends React.Component{
                constructor(props){
                    super(props);
                    this.state={isToggleOn:true};
                    //这边绑定是必要的，这样'this'才能在回调函数中使用
                    this.handleClick=this.handleClick.bind(this);
                }
                handleClick(){
                    this.setState(prevState=>({
                        isToggleOn:!prevState.isToggleOn
                    }));
                }
                render(){
                    return(
                        <button onClick={this.handleClick}>{this.state.isToggleOn ? "ON":"OFF"}
                        </button>
                    );
                }
            }
            ReactDOM.render(
                <Toggle />,
                document.getElementById("example")
            );

使用属性初始化器来正确的绑定回调函数：

在回调函数中使用 箭头函数：

21.向事件处理程序传递参数

若是 id 是你要删除那一行的 id，以下两种方式都可以向事件处理程序传递参数：

<button onClick={(e)=>this.deleteRow(id,e)}>Delete Row</button>
    <button onClick={this.deleteRow.bind(this,id)}>Delete Row</button>

通过 bind 方式向监听函数传参，在类组件中定义的监听函数，事件对象 e 要排在所传递参数的后面

22.React 条件渲染

23.元素变量

24.与运算符&&

25.阻止组件渲染

26.React 列表 & Keys

使用 map() 方法遍历数组生成了一个 1 到 5 的数字列表:

27.将以上实例重构成一个组件，组件接收数组参数，每个列表元素分配一个 key

用key提取组件

元素的 key 在他的兄弟元素之间应该唯一

28.React 组件 API

设置状态:setState

setState(object nextState\[, function callback\])

nextState，将要设置的新状态，该状态会和当前的state合并

callback，可选参数，回调函数。该函数会在setState设置成功，且组件重新渲染后调用。

合并nextState和当前state，并重新渲染组件。setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法。

替换状态：replaceState

replaceState(object nextState\[, function callback\])

nextState，将要设置的新状态，该状态会替换当前的state。

callback，可选参数，回调函数。该函数会在replaceState设置成功，且组件重新渲染后调用。

replaceState()方法与setState()类似，但是方法只会保留nextState中状态，原state不在nextState中的状态都会被删除。

设置属性：setProps  
setProps(object nextProps\[, function callback\])  
nextProps，将要设置的新属性，该状态会和当前的props合并  
callback，可选参数，回调函数。该函数会在setProps设置成功，且组件重新渲染后调用。  
设置组件属性，并重新渲染组件。

替换属性：replaceProps  
replaceProps(object nextProps\[, function callback\])  
nextProps，将要设置的新属性，该属性会替换当前的props。  
callback，可选参数，回调函数。该函数会在replaceProps设置成功，且组件重新渲染后调用。  
replaceProps()方法与setProps类似，但它会删除原有 props。

强制更新：forceUpdate  
forceUpdate(\[function callback\])  
参数说明  
callback，可选参数，回调函数。该函数会在组件render()方法调用后调用。  
forceUpdate()方法会使组件调用自身的render()方法重新渲染组件，组件的子组件也会调用自己的render()。但是，组件重新渲染时，依然会读取this.props和this.state，如果状态没有改变，那么React只会更新DOM。

forceUpdate()方法适用于this.props和this.state之外的组件重绘（如：修改了this.state后），通过该方法通知React需要调用render()

一般来说，应该尽量避免使用forceUpdate()，而仅从this.props和this.state中读取状态并由React触发render()调用。

获取DOM节点：findDOMNode  
DOMElement findDOMNode()  
返回值：DOM元素DOMElement  
如果组件已经挂载到DOM中，该方法返回对应的本地浏览器 DOM 元素。当render返回null 或 false时，this.findDOMNode()也会返回null。从DOM 中读取值的时候，该方法很有用，如：获取表单字段的值和做一些 DOM 操作。

判断组件挂载状态：isMounted  
bool isMounted()  
返回值：true或false，表示组件是否已挂载到DOM中  
isMounted()方法用于判断组件是否已挂载到DOM中。可以使用该方法保证了setState()和forceUpdate()在异步场景下的调用不会出错。

29.React 组件生命周期

组件的生命周期可分成三个状态：

Mounting：已插入真实 DOM  
Updating：正在被重新渲染  
Unmounting：已移出真实 DOM  
生命周期的方法有：

componentWillMount 在渲染前调用,在客户端也在服务端。

componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。

componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。

shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。   
可以在你确认不需要更新组件时使用。

componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

componentWillUnmount在组件从 DOM 中移除之前立刻被调用。

以下实例初始化 state ， setNewnumber 用于更新 state。所有生命周期在 Content 组件中。

30.React AJAX

<!DOCTYPE html>
    <html lang="UTF-8">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Hello React!</title>
        <script src="https://cdn.staticfile.org/react/15.4.2/react.min.js"></script>
    	<script src="https://cdn.staticfile.org/react/15.4.2/react-dom.min.js"></script>
        <script src="https://cdn.staticfile.org/babel-standalone/6.22.1/babel.min.js"></script>
        
        <script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>
    </head>
    <body>
        <div id="example"></div>
        
        <script type="text/babel">
            class UserGist extends React.Component{
                constructor(props){
                    super(props);
                    this.state = {username:"",lastGistUrl:""};
                }
                componentDidMount(){
                    this.serverRequest = $.get(this.props.source,function(result){
                        var lastGist = result[0];
                        this.setState({
                            username:lastGist.owner.login,
                            lastGistUrl:lastGist.html_url
                        });
                    }.bind(this));
                }
                componentWillUnmount(){
                    this.serverRequest.abort();
                }
                render(){
                    return (
                        <div>
                            {this.state.username}用户最新的Gist共享地址：
                            <a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a>
                        </div>
                    );
                }
            }
            ReactDOM.render(
                <UserGist source="https://api.github.com/users/octocat/gists" />,
                document.getElementById("example")
            )
        </script>
    </body>
    </html>

31.React 表单与事件

设置了输入框 input 值 value = \{this.state.data\}。在输入框值发生变化时我们可以更新 state。我们可以使用 onChange 事件来监听 input 的变化，并修改 state。

32.React Refs

允许你引用 render() 返回的相应的支撑实例（ backing instance ）。这样就可以确保在任何时间总是拿到正确的实例。

33.接下来是自己的一些小练习

*  点击弹出文案

import React, { Component } from 'react';
    import logo from './logo.svg';
    import './App.css';
    
    class App extends Component {
      constructor(props){
        super(props);
        this.handleClick = this.handleClick.bind(this);
      }
      handleClick(){
        alert("click")
      }
      render() {
        return (
          <div className="App">
            <h1 className="abc" onClick={this.handleClick}>Hello, world!</h1>
          </div>
        );
      }
    }
    
    export default App;

*  新建一个Content.js，同时，Content.js里面的值是通过在开头定义好，然后引入的。再将Content.js引入到App.js

App.js

import React, { Component } from 'react';
    import logo from './logo.svg';
    import './App.css';
    import Content from "./Content"
    
    class App extends Component {
      constructor(props){
        super(props);
        this.handleClick = this.handleClick.bind(this);
      }
      handleClick(){
        alert("click")
      }
      render() {
        return (
          <Content />
        );
      }
    }
    
    export default App;

Content.js

import React, { Component } from 'react';
    import './App.css';
    const con = {
      h1text:"Hello",
      h2text:"world"
    };
    class Con extends Component {
      render() {
        return (
          <div className="App">
            <h1>{con.h1text}</h1>
            <h2>{con.h2text}</h2>
          </div>
        );
      }
    }
    export default Con;

*  将App.js内的一个类传递到另外一个类中

import React, { Component } from 'react';
    import logo from './logo.svg';
    import './App.css';
    const con = {
      h1text:"Hello",
      h2text:"world"
    };
    class Con extends Component {
      render() {
        return (
          <div className="App">
            <h1>{con.h1text}</h1>
            <h2>{con.h2text}</h2>
          </div>
        );
      }
    }
    class App extends Component {
      constructor(props){
        super(props);
        this.handleClick = this.handleClick.bind(this);
      }
      handleClick(){
        alert("click")
      }
      render() {
        return (
          <Con />
        );
      }
    }
    
    export default App;

*  定义一个组件并传值，可以通过function定义一个函数，也可以通过class定一个类来实现

import React, { Component } from 'react';
    import logo from './logo.svg';
    import './App.css';
    const con = {
      h1text:"Hello",
      h2text:"world"
    };
    const h1style={
      color:"blue"
    }
    class Con extends Component {
      render() {
        return (
          <div className="App">
            <h1 style={h1style}>{con.h1text}</h1>
            <h2>{con.h2text}</h2>
            <button onClick={Welcome}>click me</button>
          </div>
        );
      }
    }
    function Welcome(props){
      return(
        console.log(123)
      )
    }
    class App extends Component {
      constructor(props){
        super(props);
        this.handleClick = this.handleClick.bind(this);
      }
      handleClick(){
        alert("click")
      }
      render() {
        return (
          <div>
            <Con />
            <button onClick={this.handleClick}>click me</button>
          </div>
        );
      }
    }
    
    export default App;

*  先在中端通过npm install prop-types --save下载prop-types，然后输入代码，虽然会显示内容，但是不符合类型的定义类型会在控制台报错

import React, { Component } from 'react';
    import logo from './logo.svg';
    import './App.css';
    import PropTypes from 'prop-types';
    class Son extends React.Component{
      render(){
        return(
          <div style={
       {padding:30}}>
            {this.props.number}
            <hr/>
            {this.props.array}
            <hr/>
            {this.props.boolean.toString()}
          </div>
        )
      }
    }
    Son.propTypes = {
      number:PropTypes.number,
      array:PropTypes.array,
      boolean:PropTypes.bool
    }
    class Father extends React.Component{
      render(){
        return (
          <Son number = {1} array={"[1,2,3]"} boolean = {"true"}
           />
        )
      }
    }
    export default Father;

[https_react.docschina.org]: https://react.docschina.org/
[http_www.runoob.com_react_react-tutorial.html]: http://www.runoob.com/react/react-tutorial.html