react学习

// import logo from './logo.svg';
// import './App.css';

// react完成列表渲染，map
// 注：遍历列表时同时需要一个类型为number、string不可重复的key 提高diff性能
const list = [
  {id:1, name: '首页'},
  {id:1, name: '关于'},
  {id:1, name: '我的'}
]

function App() {
  return (
    <div className="App">
      <ul>
        {list.map(list => <div key={list.id}>{list.name}</div> )}
      </ul>
    </div>
  );
}

export default App;

条件渲染

// import logo from './logo.svg';
// import './App.css';

// 条件渲染
// 技术方案 三原表达式、逻辑运算

// 1.三元表达式-满足条件才渲染 
const flag = true
function App() {
  return (
    <div className="App">
     {flag ? <span>span标签</span>: null}
     {flag && <span>这是span标签</span>}
    </div>
  );
}

export default App;

复杂多分支逻辑，通过一个专门的逻辑来写分支逻辑，模板中只负责调用

// import logo from './logo.svg';
// import './App.css';

// 原则：模板中的逻辑尽量保持精简
// 复杂多分支逻辑，通过一个专门的逻辑来写分支逻辑，模板中只负责调用
const getTag =(type) =>{
    if(type === 1){
      return <h1>h1</h1>
    }
    if(type === 2){
      return <h2>h2</h2>
    }
    if(type === 3){
      return <h3>h3</h3>
    }
}

function App() {
  return (
    <div className="App">
      {getTag(3)}
    </div>
  );
}

export default App;

事件绑定和函数组件与类组件

// import logo from './logo.svg';
// import './App.css';

import React from 'react';
import './app.css'
// 函数组件的创建和渲染 注：首字母大写
// 创建
function Hello(){
  const onClickS = ()=>{
     console.log('点击了')
  }
   return <div style={{background:'yellow'}} onClick={onClickS}>hello</div>
}

// 类组件的创建和渲染
// 创建
class HelloIn extends React.Component{
  // 事件回调的标准写法,避免this指向问题
  // 这样写 回调函数的this指向的是当前的组件实例对象
  tuchOn = () =>{
    console.log('点了类组件');
  }
  render(){
    // const tuchOn = () =>{
    //   console.log('点了类组件')
    // }

    return <div onClick={this.tuchOn}>这是一个组件</div>
  }
}

// 渲染 <HelloIn />




function App() {
  return (
    <div className="App">
      {/* 函数渲染hello组件 */}
      <Hello/>
      <Hello></Hello>
      <HelloIn/>
    </div>
  );
}

export default App;

绑定事件传递自定义参数

// import logo from './logo.svg';
// import './App.css';

import React from "react";
import "./app.css";


// 如果只需要传递自定义参数 { () => onClickS("自定义的参数")}
// 既需要e也需要额外参数    { (e) => onClickS(e, "自定义的参数")}
function Hello() {
  const onClickS = (msg) => {
    // 阻止默认行为
    // e.preventDefault()
    console.log("点击了", msg);
  };
  return <div onClick={ () => onClickS("点我传送")}>点击事件</div>;
}

function App() {
  return (
    <div className="App">
      {/* 函数渲染hello组件 */}
      <Hello />
    </div>
  );
}

export default App;

组件状态定义和使用

// import logo from './logo.svg';
// import './App.css';

import React from "react";
import "./app.css";

// 组件状态
class TesComment extends React.Component {
  // 1.定义组件状态
  state = {
    // 在此处定义各种属性为当前组件的状态
    name: "teacher",
  };



  change = () => {
    // 注：不可直接做赋值修改，必须通过方法setState()
    // this.state.name = '修改了'
    this.setState({
      name: "修改了",
    });

  };

  render() {
    // 使用状态

    return (
      <div>
        111111111 当前的name为:{this.state.name}
        {/* 修改name */}
        <button onClick={this.change}>改变</button>
      </div>
    );
  }
}

function App() {
  return (
    <div className="App">
      <TesComment></TesComment>
    </div>
  );
}

export default App;

总结：

1.编写组件其实就是编写原生js类或者函数。

2.定义状态必须通过state实例属性的方法提供一个对象名称或是固定的就叫着state.

3.修改state中任何属性值，都不可以通过直接赋值，必须通过setState赋值，这个方法来自于继承得到。

4.这里的this关键词很容易出现指向错误的问题。上面的方法是推荐写法没有this指向的问题。