React组件的使用详细讲解

// 函数式组件
// 写组件模板的时候必须遵循jsx语法
function App() {
  return (
    <div className="App">
      hello reactjs
    </div>
  );
}

// class组件
// 注意：组件名必须首字母大写(为了和普通标识符区分开)，必须继承自 React.Component 组件
// class的好处就是可以在render并列的位置
// class组件中，使用的this是当前组件实例
// App这个组件必须继承自React.Component
class App extends React.Component {
  // App这个组件要想渲染什么由内部的render方法决定，必须要有render方法，这个render方法负责渲染组件的模板就是有什么标签
  // js中如果return后面没有语句就会自动加分号
  // 当想要使用插件时得改变 组件文件名的后缀改为jsx
  // 定义组件状态state，组件数据
  // 在constructor函数中对组件状态进行初始化
  constructor(props) {
    super(props)
    this.state = {//初始化组件状态
      count: 100,
      arr: ['nodejs', 'react', 'vue.js']
    }
  }
  // state = 100
  // state = {
  //   count: 100,
  //   arr: ['nodejs', 'react', 'vue.js']
  // }
  render() {//render中必须return返回 组件模板
    return (
      <div className="App">
        <h1>{this.state.count}</h1>
        <h1>{this.state.arr}</h1>
      </div>
    );
  }
}

function Header ( props ){
 return (
 <div className="header">
 {}
 <h1>{props.id},{props.url}</h1>
 </div>
 )
}

class Header extends React.Component{
render(){
 return (
 <div className="header">
 {}
 <h1>{this.props.id},{this.props.url}</h1>
</div>
 )
 }
}

import React, { Component } from 'react';
class Child extends Component {
    handleClick() {
        // this.props.title = 'state'; //props是只读的.
    }
    render() {
        return (
            <div className="child">
                {this.props.title}{this.props.count}
                <button onClick={() => { this.handleClick() }}>更改</button>
            </div>
        );
    }
}
export default Child;

<Child title="今天学习props" count={100} />

import './App.css';
import Child from './Child';
//react中存在两种形式的组件: 函数式组件, 类组件
//使用 rcc 快速创建 类组件  ( 主要使用这个 )
//使用 rsf 快速创建 函数式组件
import React, { Component } from 'react';
class App extends Component {
  // 挂载期(挂载期的方法会自动执行，而且只执行一次)
  constructor(props) {//这个函数会在组件挂载前就执行，组件并没有显示在页面上
    super(props);
    console.log('constructor');
    this.state = {}//初始化组件状态
  }
  componentWillMount() {//挂载前
    console.log('componentWillMount 将要挂载');
  }
  componentDidMount() {//挂载完成，组件就会显示在页面上
    console.log('componentDidMount 挂载完成');
    // 在这里发送网络请求，创建定时器，事件监听，理由是：这个方法只执行一次，而且会自动执行
    // 这里的this指的是组件实例this.timerid就是将定时器保存在当前组件实例身上，就可以在各个组件生命周期共享
    // 还可以直接保存在组件状态中，只不过保存在组件状态中定时器是可以改变的，如果不变化就可以保存在组件实例身上
    this.timerid = setInterval(() => {
      console.log('定时器在执行');
    }, 1000)
  }
  // 更新期(更新期的方法可能会反复调用执行)
  // 性能优化时写的地方
  shouldComponentUpdate(nextProps, nextState) {//控制组件是否更新，目的是提示组件性能(性能优化)
    // 组件性能优化：把有效的更新进行更新，无效的更新就不让它进行更新
    // 组件状态是否有变化，如果有变化就更新，没有变化就不更新
    // 当setState中的数据和state中的数据相等没有必要更新
    // if (this.state == nextState) {
    // 满足条件就不更新，传进来的state是两个对象，当每次更新的时候对象所指的地址都是不一样的，所以不能直接比较，要将对象转换为字符串进行比较
    if (JSON.stringify(this.state) == JSON.stringify(nextState)) {
      return false;
    } else {
      return true;//返回false 表示放弃更新，返回true 表示继续更新
    }
  }
  componentWillReceiveProps(nextProps) {//Props更新，才会执行(可以用这个函数来监听Props的变化)
    // nextProps 是最新的数据的对象
    // 用这个函数监听父组件传来的数据是否有变化
    console.log('componentWillReceiveProps 将要更新');
  }
  componentWillUpdate() {
    console.log('componentWillUpdate 将要更新');
  }
  componentDidUpdate() {
    console.log('componentDidUpdate 更新完成');
  }
  // 卸载期
  componentWillUnmount() {
    console.log('componentWillUnmount 将要卸载');
    // 在这里释放所占用的资源(网路请求，定时器，事件监听)
    clearInterval(this.timerid);
  }
  // render方法在组件初次渲染时会执行一次，在之后的组件每次更新时都会执行一次
  render() { //渲染组件模板到视图
    return (
      <div>
        <h1 className="class" id="big" onClick={() => { this.handleClick() }}>hello reactjs</h1>
        {}
        <Child title={this.state.count} />
      </div>
    );
  }
  handleClick() {//组件状态
    this.setState({ count1 });
  }
}
export default App;

import React, { Component } from 'react';
class Child extends Component {
    // 挂载期(挂载期的方法会自动执行，而且只执行一次)
    constructor(props) {//这个函数会在组件挂载前就执行，组件并没有显示在页面上
        super(props);
        console.log('constructor');
        this.state = {}//初始化组件状态
    }
    componentWillReceiveProps(nextProps) {//Props更新，才会执行(可以用这个函数来监听Props的变化)
        // nextProps 是最新的数据的对象
        // 用这个函数监听父组件传来的数据是否有变化
        // 传过来的值是新的就会执行，传过来的值不是新的就不会执行
        // 这里传过来的数据是一个对象，要将对象转换为字符串进行比较，因为对象每次更新地址都会变化，只是值不变
        console.log('Child componentWillReceiveProps 将要更新');
    }
    componentWillUpdate() {
        console.log('Child componentWillUpdate 将要更新');
    }
    componentDidUpdate() {
        console.log('Child componentDidUpdate 更新完成');
    }
    render() {
        return (
            <div>

            </div>
        );
    }
}
export default Child;

import './App.css';
//react中存在两种形式的组件: 函数式组件, 类组件
//使用 rcc 快速创建 类组件  ( 主要使用这个 )
//使用 rsf 快速创建 函数式组件
import React, { Component } from 'react';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      phone: '',
      isRead: false//是否勾选协议
    }
  }
  handleChange(e) {
    this.setState({
      phone: e.target.value
    }, () => {
      console.log(this.state);
    })
  }
  handleChecked(e) {
    this.setState({
      isRead: e.target.checked
    }, () => {
      console.log(this.state);
    })
  }
  render() { //渲染组件模板到视图
    return (
      <div>
        {}
        {}
        {}
        <input type="text" value={this.state.phone} onChange={(e) => { this.handleChange(e) }} placeholder='请输入手机号' />
        <input type="checkbox" value={this.state.isRead} onChange={(e) => { this.handleChecked(e) }} />
      </div>
    );
  }
}
export default App;

import './App.css';
//react中存在两种形式的组件: 函数式组件, 类组件
//使用 rcc 快速创建 类组件  ( 主要使用这个 )
//使用 rsf 快速创建 函数式组件
import React, { Component } from 'react';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      phone: '',
      pass: '',
      isRead: false//是否勾选协议
    }
  }
  handleChange(e) {
    // 获取目标控件input元素对应的别名
    // e.target.name
    this.setState({
      // 因为别名是个变量，所以用方括号括起来
      // 如果是单选。复选框，通过e.target.checked取值
      // 如果是其它元素，通过e.target.value取值
      [e.target.name]: ((e.target.type == 'checkbox' || e.target.type == 'radio') ? e.target.checked : e.target.value)
    }, () => {
      console.log(this.state);
    })
  }
  login() {
    // 发送登录请求
    // 删除里面没有用的或者取出有用的传过去
    // 这样直接删除会影响之前的解决方法是深拷贝
    // delete this.state.isRead;
    // 深拷贝state
    var newState = JSON.parse(JSON.stringify(this.state));
    delete newState.isRead;
    console.log(newState);
    // user_login(this.state).then((res)=>{

    // })
  }
  render() { //渲染组件模板到视图
    return (
      <div>
        {}
        {}
        {}
        <input type="text" name="phone" value={this.state.phone} onChange={(e) => { this.handleChange(e) }} placeholder='请输入手机号' /><br />
        <input type="password" name="pass" value={this.state.pass} onChange={(e) => { this.handleChange(e) }} placeholder='请输入密码' />
        <input type="checkbox" name="isRead" value={this.state.isRead} onChange={(e) => { this.handleChange(e) }} />
      </div>
    );
  }
}
export default App;