Step1、接触一下react

发布时间：2020-12-15 20:23:57 所属栏目：百科来源：网络整理

导读：比较蠢萌，所以得想找个基础视频课看看，简短，跟上手。 react的机制，我就记得虚拟Dom和diff算法，我理解为减少性能损耗，只对有更改的部分进行渲染。小白各种听了听，表示对开始一个项目一点用都没有，还是先学会使用脚手架吧create-react-app。 npm inst

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

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;

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!