react笔记

1：创建react组件的方式

	//函数形式React 模块
import React from "react";

const list = [
  { id: 1, title: "message1", content: "我爱你,中国" },
  { id: 2, title: "message2", content: "hello world" },
  { id: 3, title: "message3", content: "你好你好" },
  { id: 4, title: "message4", content: "哈哈哈 react很不错" },
];

// 暴露并创建react类
export default function MessageDetail(props) {
  console.log(props);
  const { id } = props.match.params;
  const message = list.find((item) => item.id === id * 1);
  return (
    <ul>
      <li>id:{message.id}</li>
      <li>title:{message.title}</li>
      <li>content:{message.content}</li>
    </ul>
  );
}

// 类形式react
import React, { Component } from 'react';
// 暴露并创建react类
export default class News extends Component {
  state = {
    list : ['死神','七龙珠','哆啦A梦']
     
  }
   render() {
    const {list} =this.state
   return (
    <ul>
      {
        list.map((item,index) => {
          return (
            <li key={index}>{item}</li>
          )
        })
      }
    </ul>
   )
 }
}

2：初始化数据&事件处理

tip:修改state中的参数必须使用this.setState

 //事件处理&初始化数据 方式一：   
 <script type="text/babel">
      // 定义组件类
      class MyComponents extends React.Component {
        constructor (props) {
          super(props)
          // 初始化数据
          this.state = {
            isLike :true
          }
          // 新增方法绑定为组件对象(重点)
          this.handlerState =this.handlerState.bind(this)
        }
        // 切换事件
        handlerState() {
          // 更新state状态
          this.setState({
            isLike:!this.state.isLike
          })
        }
        render () {
          // 读状态
          const {isLike} = this.state
          return <h3 onClick={this.handlerState}>{isLike ? '你好':'再见'}</h3>
        }
      }
      ReactDOM.render(<MyComponents />, document.getElementById("test"));
    </script>
//事件处理&初始化数据 方式二:
// 导入 React 模块
import React, { Component } from "react";

// 暴露并创建react类
export default class Message extends Component {
  // 初始化数据
  state = {
    list: [{
      id: 1,
      title: "message1",
    },
    {
      id: 2,
      title: "message2",
    },
    {
      id: 3,
      title: "message3",
    },],
  };
  pushFn = (id) => {
    console.log(id,'id');
  };
  replaceFn = (id) => {
    console.log(id,'id');
  };
  goForward = () => {
    this.props.history.goForward();
  };
  goBack = () => {
    this.props.history.goBack();
  };
  render() {
    const { list } = this.state;
    return (
      <div>
        <ul>
          {list.map((item, index) => {
            return (
              <li key={index}>
                  {item.title}
                &nbsp;&nbsp;
                {/* 事件传参 */}
                <button onClick={() => this.pushFn(item.id)}>
                  查看详情(push)
                </button>
                <button onClick={() => this.replaceFn(item.id)}>
                  查看详情(replace)
                </button>
              </li>
            );
          })}
        </ul>
        {/* 普通事件 */}
        <button onClick={this.goBack}>返回</button>&nbsp;
        <button onClick={this.goForward}>前进</button>
      </div>
    );
  }
}

 3：路由模块

react-router 官网  Docs Home | React Router

react-router基本概念：react-router的基本用法(PC端)_FF_XM的博客-CSDN博客

// 导入 React 模块
import React, { Component } from "react";
// react-router-dom路由模块必装的包（Switch：路由只需显示其中一个时使用,Route：路由组件，Redirect：路由重定向组件（没有默认路由时使用），）
import {Switch,Route,Redirect} from 'react-router-dom'

// 自定义组件 (MyNavLink是从react-router-dom提出来的自定义组件,用于路由跳转)
import MyNavLink from "../components/my-nav-link";
import News from "./news";
import Message from "./message";

// 暴露并创建react类
export default class Home extends Component {
  render() {
    return (
      <div>
        <h2>home component</h2>
        <ul className="nav nav-tabs">
          <li>
            <MyNavLink to="/home/news" >
              News
            </MyNavLink>
          </li>
          <li>
            <MyNavLink to="/home/message" >
              Message
            </MyNavLink>
          </li>
        </ul>
        <div>
          <Switch >
            <Route path='/home/news' component={News}></Route>
            <Route path='/home/message' component={Message}></Route>
            <Redirect to='/home/news' />
          </Switch>
        </div>
      </div>
    );
  }
}

4：组件的生命周期

1. 组件的三个生命周期状态: 

   Mount：插入真实 DOM

   Update：被重新渲染

   Unmount：被移出真实 DOM

2. React 为每个状态都提供了勾子(hook)函数

    * componentWillMount()

    * componentDidMount()

    * componentWillUpdate()

    * componentDidUpdate()

    * componentWillUnmount()

    生命周期流程:

1. 第一次初始化渲染显示: ReactDOM.render()

      * constructor(): 创建对象初始化state

      * componentWillMount() : 将要插入回调

      * render() : 用于插入虚拟DOM回调

      * componentDidMount() : 已经插入回调

     2.每次更新state: this.setSate()

      * componentWillUpdate() : 将要更新回调

      * render() : 更新(重新渲染)

      * componentDidUpdate() : 已经更新回调

     3.移除组件: ReactDOM.unmountComponentAtNode(containerDom)

      * componentWillUnmount() : 组件将要被移除回调

重要的钩子

     1.render(): 初始化渲染或更新渲染调用

     2.componentDidMount(): 开启监听, 发送ajax请求

     3.componentWillUnmount(): 做一些收尾工作, 如: 清理定时器

     4.componentWillReceiveProps(): 父组件传的参数发生变化触发

 5：react脚手架搭建

1. xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目
    * 包含了所有需要的配置
    * 指定好了所有的依赖
    * 可以直接安装/编译/运行一个简单效果
2. react提供了一个专门用于创建react项目的脚手架库: create-react-app
3. 项目的整体技术架构为: react + webpack + es6  + babel + eslint