频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
React项目详解-寒青-SegmentFault思否
2019-04-10 12:40:36           
收藏   我要投稿
原文链接:React项目详解
GITHUB:react-webpack-config
持续更新...

注册送白菜38

使用webpack需要安装的依赖

webpack,webpack-cli,react,react-dom babel-loader,@babel/core,@babel/preset-env,@babel/preset-react 设置.babelrc,{"presets": ["@babel/preset-env","@babel/preset-react"]}

设置scripts:

 "dev": "webpack --mode development",
 "build": "webpack --mode production"

设置webpack-dev-server:

devServer: {
  compress: true,
    port: 9000,
    hot: true
},
"start": "webpack-dev-server --config webpack.config.js" 

设置performance:

performance: {
  hints: false
}

Component

基本组件

let title = <h1>Hello, world!</h1>
ReactDOM.render(title,document.getElementById('root'))

动态组件

import React from 'react';
import ReactDOM from 'react-dom';
let displayTime = () => {
  let nowTime = (
    <p>
      <span>现在时间:{new Date().toLocaleTimeString()}</span>
    </p>
  );
  ReactDOM.render(t
    nowTime,
    document.getElementById('root')
  );
};
setInterval(displayTime, 1000);

class组件构建器

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
class HelloTitle extends Component {
  render() {
    return <h1>Hello,World!</h1>
  }
}
ReactDOM.render(
  <HelloTitle/>,
  document.getElementById('root')
);

props属性

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
class HelloTitle extends Component {
  render() {
    return <h1>Hello,{this.props.name}!</h1>
  }
}
let titleDiv = (
  <p>
    <HelloTitle name="React"/>
    <HelloTitle name="World"/>
  </p>
);
ReactDOM.render(
  titleDiv,
  document.getElementById('root')
);

props多层使用

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
class HelloTitle extends Component {
  render() {
    return <h1>Hello,{this.props.name}!</h1>
  }
}
class HelloDiv extends Component {
  render() {
    return <p><HelloTitle name={this.props.name}/></p>
  }
}
ReactDOM.render(
  <HelloDiv name="React"/>,
  document.getElementById('root')
);

组件复用

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
class HelloTitle extends Component {
  render() {
    return <h1 style={this.props.style}>{this.props.content}</h1>
  }
}
class HelloDiv extends Component {
  render() {
    return <p>
      <HelloTitle content="比较大的字" style={{'fontSize': 18}}/>
      <HelloTitle content="比较小的字" style={{'fontSize': 12}}/>
    </p>
  }
}
ReactDOM.render(
  <HelloDiv/>,
  document.getElementById('root')
);

Component的状态state和生命周期

state属性

constructor(props) {
  super(props);
  this.state = {
    time: new Date().toLocaleTimeString()
  }
}
render() {
  return <h1>现在时间是{this.state.time}</h1>
}

组件构建完成后先执行的动作,componentDidMount():

componentDidMount() {
  let upTime = () => {
    this.setState({time: new Date().toLocaleTimeString()})
  };
  setInterval(upTime, 1000)
}

setState()修改状态值

this.setState({time: new Date().toLocaleTimeString()})

生命周期

在constructor中初始化组件内部的资料。 使用render()在网页上输出组件内容。 输出后会执行componentDidMount()进行一次调用。 当组件内部的state值被修改时执行componentDidUpdate()。 当组件被移除时会执行componentWillUnmount()的内容一次。
点击复制链接 与好友分享!回本站首页
相关TAG标签
上一篇:你不知道的浏览器页面渲染机制-前端工匠公众号-SegmentFault思否
下一篇:实现Promise的first等各种变体-蚊子的博客-SegmentFault思否
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑--致力于做实用的IT技术学习网站