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>
        {/* 非受控元素变成受控元素，通过value和onChange绑定实现 */}
        {/* value绑定，将组件状态绑定到元素的value属性 */}
        {/* onChange绑定，当元素的值发生改变时更新元素的值到组件状态 */}
        <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>
        {/* 非受控元素变成受控元素，通过value和onChange绑定实现 */}
        {/* value绑定，将组件状态绑定到元素的value属性 */}
        {/* onChange绑定，当元素的值发生改变时更新元素的值到组件状态 */}
        <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;