react 学习笔记

时间 2019-11-08

标签 react 学习笔记栏目 React 繁體版

原文原文链接

Babel 转译器这是react自带的一个编译器javascript

props和states一个是组件外部的，一个是组件内部的css

组件 & Props

组件能够将UI切分红一些的独立的、可复用的部件，这样你就只需专一于构建每个单独的部件。html

组件从概念上看就像是函数，它能够接收任意的输入值（称之为“props”），并返回一个须要在页面上展现的React元素。java

函数定义/类定义组件

定义一个组件最简单的方式是使用JavaScript函数：react

function Welcome(props) { return <h1>Hello, {props.name}</h1>; }

该函数是一个有效的React组件，它接收一个单一的“props”对象并返回了一个React元素。咱们之因此称这种类型的组件为函数定义组件，是由于从字面上来看，它就是一个JavaScript函数。git

你也可使用 ES6 class 来定义一个组件:github

class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } }

上面两个组件在React中是相同的。api

咱们将在下一节讨论类的一些额外特性。在那以前，咱们都将使用较为简洁的函数定义组件。网络

组件渲染

在前面，咱们遇到的React元素都只是DOM标签：app

const element = <div />;

然而，React元素也能够是用户自定义的组件：

const element = <Welcome name="Sara" />;

当React遇到的元素是用户自定义的组件，它会将JSX属性做为单个对象传递给该组件，这个对象称之为“props”。

例如,这段代码会在页面上渲染出”Hello,Sara”:

function Welcome(props) { return <h1>Hello, {props.name}</h1>; } const element = <Welcome name="Sara" />; ReactDOM.render( element, document.getElementById('root') );

在 CodePen 上试试。

咱们来回顾一下在这个例子中发生了什么：

咱们对<Welcome name="Sara" />元素调用了ReactDOM.render()方法。
React将{name: 'Sara'}做为props传入并调用Welcome组件。
Welcome组件将<h1>Hello, Sara</h1>元素做为结果返回。
React DOM将DOM更新为<h1>Hello, Sara</h1>。

警告:

组件名称必须以大写字母开头。

例如，<div /> 表示一个DOM标签，但 <Welcome /> 表示一个组件，而且在使用该组件时你必须定义或引入它。

组合组件

组件能够在它的输出中引用其它组件，这就可让咱们用同一组件来抽象出任意层次的细节。在React应用中，按钮、表单、对话框、整个屏幕的内容等，这些一般都被表示为组件。

例如，咱们能够建立一个App组件，用来屡次渲染Welcome组件：

function Welcome(props) { return <h1>Hello, {props.name}</h1>; } function App() { return ( <div>  <Welcome name="Sara" />  <Welcome name="Cahal" />  <Welcome name="Edite" /> </div> ); } ReactDOM.render( <App />, document.getElementById('root') );

在 CodePen 上试试。

一般，一个新的React应用程序的顶部是一个App组件。可是，若是要将React集成到现有应用程序中，则能够从下而上使用像Button这样的小组件做为开始，并逐渐运用到视图层的顶部。

警告:

组件的返回值只能有一个根元素。这也是咱们要用一个<div>来包裹全部<Welcome />元素的缘由。

提取组件

你能够将组件切分为更小的组件，这没什么好担忧的。

例如，来看看这个Comment组件：

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

在 CodePen 上试试。

这个组件接收author(对象)、text(字符串)、以及date(Date对象)做为props，用来描述一个社交媒体网站上的评论。

这个组件因为嵌套，变得难以被修改，可复用的部分也难以被复用。因此让咱们从这个组件中提取出一些小组件。

首先，咱们来提取Avatar组件：

function Avatar(props) { return (  <img className="Avatar"  src={props.user.avatarUrl}  alt={props.user.name}  /> ); }

Avatar做为Comment的内部组件，不须要知道是否被渲染。所以咱们将author改成一个更通用的名字user。

咱们建议从组件自身的角度来命名props，而不是根据使用组件的上下文命名。

如今咱们能够对Comment组件作一些小小的调整：

function Comment(props) { return ( <div className="Comment"> <div className="UserInfo">  <Avatar user={props.author} /> <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> ); }

接下里，咱们要提取一个UserInfo组件，用来渲染Avatar旁边的用户名：

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

这可让咱们进一步简化Comment组件：

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

在 CodePen 上试试。

提取组件一开始看起来像是一项单调乏味的工做，可是在大型应用中，构建可复用的组件彻底是值得的。当你的UI中有一部分重复使用了好几回（好比，Button、Panel、Avatar），或者其自身就足够复杂（好比，App、FeedStory、Comment），相似这些都是抽象成一个可复用组件的绝佳选择，这也是一个比较好的作法。

Props的只读性

不管是使用函数或是类来声明一个组件，它决不能修改它本身的props。来看这个sum函数：

function sum(a, b) { return a + b; }

相似于上面的这种函数称为“纯函数”，它没有改变它本身的输入值，当传入的值相同时，老是会返回相同的结果。

与之相对的是非纯函数，它会改变它自身的输入值：

function withdraw(account, amount) { account.total -= amount; }

React是很是灵活的，但它也有一个严格的规则：

全部的React组件必须像纯函数那样使用它们的props。

固然，应用的界面是随时间动态变化的，咱们将在下一节介绍一种称为“state”的新概念，State能够在不违反上述规则的状况下，根据用户操做、网络响应、或者其余状态变化，使组件动态的响应并改变组件的输出。

编辑本页面

this.props.children

this.props 对象的属性与组件的属性一一对应，可是有一个例外，就是 this.props.children 属性。它表示组件的全部子节点（查看 demo05）。

var NotesList = React.createClass({ render: function() { return ( <ol> { React.Children.map(this.props.children, function (child) { return <li>{child}</li>; }) } </ol> ); } }); ReactDOM.render( <NotesList> <span>hello</span> <span>world</span> </NotesList>, document.body );

上面代码的 NoteList 组件有两个 span 子节点，它们均可以经过 this.props.children 读取，运行结果以下。

这里须要注意， this.props.children 的值有三种可能：若是当前组件没有子节点，它就是 undefined ;若是有一个子节点，数据类型是 object ；若是有多个子节点，数据类型就是 array 。因此，处理 this.props.children 的时候要当心。

React 提供一个工具方法 React.Children 来处理 this.props.children 。咱们能够用 React.Children.map 来遍历子节点，而不用担忧 this.props.children 的数据类型是 undefined 仍是 object。更多的 React.Children 的方法，请参考官方文档。

jsx表明objects.

Hello.js

import React from 'react';

export default ({ name }) => <h1>Hello {name}!</h1>;

index.html

<div id="root"></div>

index.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import Name from './Name';
class App extends Component {
    constructor() {
        super();
        this.state = {
            name: 'React1',
            insertName: 'xss',
            hasNameFlag: true
        };
        console.log("indexconstructor");
    }

    changeName = () => {
        this.setState({
            insertName: 'yys',
        })
    }
    deleteName = () => {
        this.setState({
            hasNameFlag: false
        })

    }
    compomentwillMount() {
        console.log("indexcompomentwillMount");//dom放进去以前，只执行一次
    }

    componentDidMount() {
        console.log("indexcomponentDidMount");//dom放进去以后，只执行一次
    }
    componentWillReceiveProps(nextProps) {//有改变就执行，修改states的时候用到

        console.log("indexcomponentWillReceiveProps");
    }
    componentwillupDate() {//dom更新以前 
        console.log("indexcomponentwillupDate");
    }
    componentDidUpdate() {
        console.log("indexcomponentDidUpdate");//dom更新以后
    }

    componentWillUnmount() {
        console.log("indexcomponentWillUnmount");// dom组件被移除以前被调用，能够用于作一些清理工做

    }
    render() {
        console.log("indexrender");
        const { insertName, hasNameFlag } = this.state;
        const a = (
            <h1 className={"greeting"} title="yys">
                Hello, world!
      </h1>
        );
        let name = null;
        if (hasNameFlag) {
            name = <Name name={insertName} >

                <span>world</span></Name>;
        }
        return (
            <div>
                <Hello name={this.state.name} />
                {name}
                <button onClick={this.changeName}>更名</button>
                <button onClick={this.deleteName}>删除</button>
                <p>
                    Start editing to see some magic happen :)
        </p>
            </div>
        );
    }
}

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

Name.js

import React, { Component } from 'react';
class Name extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: props.name
        };
        // console.log(this)
        console.log("constructor");
    }
    compomentwillMount() {
        console.log("compomentwillMount");
    }

    componentDidMount() {
        console.log("componentDidMount");
    }
    componentWillReceiveProps(nextProps) {
        if (nextProps.name === this.props.name) return;
        this.setState({
            name: nextProps.name
        })
        console.log("componentWillReceiveProps");
    }
    componentwillupDate() {
        console.log("componentwillupDate");
    }
    componentDidUpdate() {
        console.log("componentDidUpdate");
    }

    componentWillUnmount() {
        console.log("componentWillUnmount");

    }
    render() {
        console.log("render");
        const { name } = this.state;
        return <h2>{name}</h2>;
    }
}

export default Name;

第一次刷新进入时：

点击修改时

点击删除时：

constructor 1 只执行一次

compomentwillMount 1 dom放进去以前，也是只执行一次

componentDidMount 1 dom放进去以后，也是只执行一次

componentwillReceIveProps 有改变就执行，修改states的时候用到

componentwillupDate dom更新以前

componentDidupDate dom更新以后

componentWillUnmount dom组件被移除以前被调用，能够用于作一些清理工做

OK. so here goes. If you have a simple structure with a parent and 2 children like this:

<Parent> <Child/> <Child/> </Parent>

Then the sequence of events firing will be:

<Parent> componentWillMount()
<Parent> render(), which starts to render children
<Child> componentWillMount() of the first child
<Child> render() of the first child
<Child> componentWillMount() of the second child
<Child> render() of the second child
<Child> componentDidMount() of the first child (these will start only after the last render in the tree has run)
<Child> componentDidMount() of the second child
<Parent> componentDidMount() (this one will run only after its last child has run componentDidMount)