Step1、接触一下react

比较蠢萌，所以得想找个基础视频课看看，简短，跟上手。

react的机制，我就记得虚拟Dom和diff算法，我理解为减少性能损耗，只对有更改的部分进行渲染。

小白各种听了听，表示对开始一个项目一点用都没有，还是先学会使用脚手架吧create-react-app。

npm install -g create-react-app

create-react-app demo　　/*cd想要的路径，再创建项目咯*/
npm start  /*即react-scripts start ,react-scripts是create-react-app生成项目所有的依赖。*/

在浏览器里localhost:3000，就能看到react的项目跑成功了。确保端口不被占用（Mac解决端口占用：lsof -i tcp:端口号，kill PID）。

 

 

 

两条<hr>隔开上面一个Header组件，下面一个Footer组件。

实现从Header组件的input输入框输入一个名字，使得Footer组件中也能显示。

在App.js中使用子组件Header，在子组件中接收用户传入的值，传值给父组件，父组件再把值传给另一个子组件Footer，实现子组件Header和Footer之间的传值。

 

在文件夹/component中新建Header.js的代码：有状态的组件。

import React, { Component } from 'react';
import './Header.css';
import PropTypes from 'prop-types'

class Header extends Component {
    constructor(props){
        super(props);
        this.inputRef = React.createRef();
        this.state = {
            name:this.props.name
        }
    };

    onchangename = () => {
        let originalInputDom = this.inputRef.current;
        let content = originalInputDom.value;
        this.setState({
            name: content
        },() => {
            this.props.change(this.state.name)
        });
    };

    render() {
        return (
            <div className="header-container">
                <div>
                    <p>hello, {this.state.name}!</p>
                    <input ref={this.inputRef}/>
                    <button className="btn btn-primary" onClick={this.onchangename}>submit</button>
                </div>
            </div>
        );
    }
}

Header.propTypes = {
    change:PropTypes.func，
    name:PropTypes.string

};

export default Header;

填充Header.js的代码的过程：

这就是一个最基本的有状态组件的格式。render(){}渲染出想要的效果。

class 组件名 extends Component {    //此处需要 import React, { Component } from 'react';
    render() {
        return (
            <div></div>
        );
    }
}
export default 组件名;

父组件会给这个子组件传递一个值name：在子组件引用此值的方式就是this.props.name；在render渲染的内容中显示此值必须使用{}，即可以使用{this.props.name}显示出来。

验证此处传值是否类型正确

Header.propTypes = {    //此处需要 import PropTypes from 'prop-types';
    name:PropTypes.string
};

但因为这个值对于此Header组件是有用的，并且需要用户传值更改的，所以选择使用this.state来记录name这个属性（写在constructor()中）。呼应此Header组件选择有状态组件。

        this.state = {
            name:this.props.name
        }

方法onchangename使用箭头函数来写。this.setState({})方法改变值，才会进行渲染，是异步的，this.setState({},匿名函数)能确保完成。

    onchangename = () => {
        let originalInputDom = this.inputRef.current;
        let content = originalInputDom.value;
        this.setState({
            name: content
        },() => {
            this.props.change(this.state.name)　　//change由父组件传进来，类型是一个方法，完成对父组件中name的赋值
        });
    };

<button className="btn btn-primary" onClick={this.onchangename}>submit</button>

在父组件App中，使用到的地方如下。形参name，对应子组件中使用此方法this.props.change实参this.state.name。点击button按钮，触发事件，渲染子组件的name，顺利赋值给父组件的name。

    onname = (name) => {
        this.setState({
            name: name
        })
    }

<Header name={this.state.name} change={this.onname}/>

 

 

在文件夹/component中新建Footer.js的代码：无状态组件。看一下写法和有状态的区别。

（无状态组件：无需state，即不处理用户的输入，组件的所有数据都是依赖于props传入的；不需要用到生命周期函数）

import React from 'react'
import './footer.css';

const Footer = (props) => {
    return (
        <div className="footer">
            <div className="container">
                <ul className="footer-menu">
                    <li>
                        <a href='https://www.google.com'>🔍</a>
                    </li>
                    <li>学习</li>
                    <li>回顾</li>
                    <li>创造</li>
                </ul>
                <br/>
                <br/>
                <p>本项目仅供{props.aftername}娱乐。</p>
            </div>
        </div>
    );
}

export default Footer;

 

在App.js中的使用：

import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
import Footer from './component/footer'
import Header from './component/Header'

class App extends Component {
    constructor(){
        super();
        this.state = {
            name: "hh"
        }
    }
    onname = (name) => {
        this.setState({
            name: name
        })
    }

    render() {
        return (
            <div className="App">
                <div>
                    <Header name={this.state.name} change={this.onname}/>

                </div>


                <hr/>
                <header className="App-header">
                    <img src={logo} className="App-logo" alt="logo"/>
                    <h1 className="App-title">Welcome to React</h1>
                </header>
                <p className="App-intro">
                    To get started, edit <code>src/App.js</code> and save to reload.
                </p>
                <hr/>


                <div>
                    <Footer aftername={this.state.name}/>
                </div>
            </div>
        );
    }
}

export default App;