React组件基础

作者: 寒岳旺旺 | 来源:发表于2020-02-24 12:45 被阅读0次

ReactNative学习笔记（三）Hello World!
RN原始项目-HelloWorld
React Native基础之Image
React 全家桶
React学习笔记_01
[内部]React从入门到放弃：入门篇
react-native 初体验
React Native组件收集
react路由
React面试题总结

1、虚拟DOM
当组件状态 state 有更改的时候，React 会自动调用组件的 render 方法重新渲染整个组件的 UI。
当然如果真的这样大面积的操作 DOM，性能会是一个很大的问题，所以 React 实现了一个Virtual DOM，组件 DOM 结构就是映射到这个 Virtual DOM 上，React 在这个 Virtual DOM 上实现了一个 diff 算法，当要重新渲染组件的时候，会通过 diff 寻找到要变更的 DOM 节点，再把这个修改更新到浏览器实际的 DOM 节点上，所以实际上不是真的渲染整个 DOM 树。这个 Virtual DOM 是一个纯粹的 JS 数据结构，所以性能会比原生 DOM 快很多。

2、创建react脚手架

npx create-react-app antd-demo

3、简单react组件入门

脚手架生成之后会自动生成index.html文件--需要挂载根节点<div>名称为root

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

手动创建一个components的文件目录用来存放所有的组件
1.创建一个DemoHeader组件目录
2.DemoHeader组件下新建index.js、index.less文件
3.DemoHeader目录下index.js文件

import React from 'react'
import './index.less'

export default class DemoHeader extends React.Component{
    render(){
        return (
            <header className="header">
                <h1 className="header-top">这里是头部测试组件文件</h1>
            </header>
        )
    }
}

4.DemoHeader目录下组件样式文件：index.less

.header{
    .header-top{
        height: 60px;
        line-height: 60px;
        padding: 0 20px;
        text-align: right;
        a{
            margin-left: 40px;
        }
    }
    .breadcrumb{
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
        border-top: 1px solid #f9c700;
        .breadcrumb-title{
            text-align: center;
            }
        }
        .weather{
            text-align: right;
        }
}

5.主程序代码 test.js

import React from 'react'
import DemoHeader from './components/DemoHeader'

export default class Test extends React.Component{
    render(){
        return (
            /*主程序代码中直接加载组件进行使用*/
            <DemoHeader/>
        );
    }
}

6.根目录下自动生成的入口文件index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Life from './pages/demo/Life';
import Admin from './admin'
import Test from './test'
import * as serviceWorker from './serviceWorker';

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

7.采用yarn start的方式进行运行程序-运行结果

image.png

8.程序结构

image.png

4、JSX表达式

三元表达式

import React from 'react'
import './index.less'

export default class DemoHeader extends React.Component{
    render(){
        let username = '';
        return (
            <header className="header">
                <h1 className="header-top">这里是头部测试组件文件</h1>
                <p>{ username=='' ? '用户没有登录':'用户名'+username }</p>
            </header>
        )
    }
}

数组循环

import React from 'react'
import './index.less'

let names = ['changli','wangwang','hanyue']

export default class DemoHeader extends React.Component{
    constructor(){
        super();//调用基类的所有初始化方法
        this.state = {
            username : "Parry",
            age : 20
        };
    }
    render(){
        setTimeout(
            () => {
                this.setState({ username:"ddd",age:30 })
            },4000);

        return (
            <header>
                <h1>这里是头部测试组件文件</h1>
                <p>{ this.state.username }  { this.state.age } {this.props.userId} {this.props.username}</p>
                <input type="button"  value="提交"/>
                /*names为列表，name为变量名，=> 箭头函数，临时函数*/
                { names.map((name,index) => <p key={index}>Hello,I am {name}</p>) }
            </header>
        )
    }
}

5、生命周期

image.png

import React from 'react'
import './index.less'

export default class DemoHeader extends React.Component{
    /*DemoHeader组件加载之前*/
    componmentWillMount(){
        console.log("DemoHeader -- componmentWillMount");
    }

    /*DemoHeader组件加载之后*/
    componmentDidMount(){
        console.log("DemoHeader -- componmentDidMount");
    }

    render(){
        let username = '';
        return (
            <header className="header">
                <h1 className="header-top">这里是头部测试组件文件</h1>
                <p>{ username=='' ? '用户没有登录':'用户名'+username }</p>
            </header>
        )
    }
}