您现在的位置是：首页 >其他 >与react的初定情素网站首页其他

与react的初定情素

Front思 2024-10-16 12:01:04
简介与react的初定情素

在这里插入图片描述
前要： 其实吧！之前的博客基本没有写过相关react的笔记，因为我根本没有写过react的相关项目，作为一个小水前端，没有写过react的项目会让别人笑大大牙的，所以趁着划水时间好好学习，天天向上！

React 是一个用于构建用户界面的 JAVASCRIPT 库。主要用于构建 UI，很多人认为 React 是 MVC 中的 V（视图）。起源于 Facebook 的内部项目，用来架设 Instagram 的网站。拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。经过vue岁月的磨洗，直接上脚手架把！

目录概览

尝试修改 src/App.js 文件代码

import React,{ Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
	render() {
		return (
		   <div className="App">
		     <header className="App-header">
		       <img src={logo} className="App-logo" alt="logo" />
		       <p>Edit <code>src/App.js</code> and save to reload.</p>
		       <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" >
		         Learn React
		       </a>
		     </header>
		   </div>
		)
	}
}
export default App;

开局报错，幸运！

ERROR in Failed to load plugin ‘flowtype‘ declared in ‘package.json » eslint-config-react-app‘

项目中建.eslintrc.json - 遵循的eslink规则
react没暴露webpack的配置，但webpack中有一个配置是写死的，需要一个用户自己的eslink规则
文件内容可以为{}，也可以自己定义一套规则
在这里插入图片描述

JSX

​React 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的，在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。

所以推荐使用JSX来编写逻辑会更好​！！！

我们知道元素是构成 React 应用的最小单位，JSX 就是用来声明 React 当中的元素。与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。要将 React 元素渲染到根 DOM 节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上：

JSX表达式

import React ,{Component} from 'react'
import './Hello.css'

export default class Hello extends Component{
    render (){
        return <h1>{2+3}</h1>
    }
}

JSX 不能使用 if else ，但可使用三元运算表达式替代

import React ,{Component} from 'react'
import './Hello.css'

export default class Hello extends Component{
    render (){
		let i = 1;
        return <h1>{i == 1 ? 'True!' : 'False'}</h1>
    }
}

JSX样式

React 推荐使用内联样式。使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。为 h1 元素添加 myStyle 内联样式：

import React ,{Component} from 'react'
import './Hello.css'

export default class Hello extends Component{
    render (){
		var myStyle = {
		    fontSize: 100,
		    color: '#FF0000'
		};
        return <h1 style = {myStyle}>hell word!</h1>
    }
}

JSX数组

JSX 允许在模板中插入数组，数组会自动展开所有成员：

import React ,{Component} from 'react'
import './Hello.css'

export default class Hello extends Component{
    render (){
		var arr = [
			<h1>hell word</h1>,
			<h2>努力学习react！</h2>,
		];
        return <h1>{arr}</h1>
    }
}

组件

在这里插入图片描述

state状态

React 把组件看成一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
React 里，只需更新组件的state，然后根据新 state 重新渲染用户界面（不要操作 DOM）。
以下实例创建一个名称扩展为 React.Component 的 ES6 类，在 render() 方法中使用 this.state 来修改当前的时间。添加一个类构造函数来初始化状态 this.state，类组件应始终使用 props 调用基础构造函数。

import React ,{Component} from 'react'
import './Hello.css'

export default class Hello extends Component{
	constructor(props) {
	    super(props);
	    this.state = {date: new Date()};
	}
    render (){
        return (
		   <h1>hell word</h1>,
		   <h2>{this.state.date.toLocaleTimeString()}</h2>
		)
    }
}

我们将Clock设置自己的计时器并每秒更新一次。

将生命周期方法添加到类中
在具有许多组件的应用程序中，在销毁时释放组件所占用的资源非常重要。

每当 Clock 组件第一次加载到 DOM 中的时候，我们都想生成定时器，这在 React 中被称为挂载。

同样，每当 Clock 生成的这个 DOM 被移除的时候，我们也会想要清除定时器，这在 React 中被称为卸载。

我们可以在组件类上声明特殊的方法，当组件挂载或卸载时，来运行一些代码：

import React ,{Component} from 'react'
import './Hello.css'

export default class Hello extends Component{
	//构造函数，初始化state状态值
	constructor(props) {
	    super(props);
	    this.state = {date: new Date()};
	}
	//首次渲染前清除所有的定时器
	componentWillUnmount() {
	    clearInterval(this.timerID);
	}
	//render渲染之后定时0.1秒执行tick方法的操作
	componentDidMount() {
		this.timerID = setInterval( 
		    () => this.tick,100
		);
	}
	//更新日期的方法
	tick() {
	    this.setState({
	      date: new Date()
	    });
	} 
	//渲染组件
    render (){
        return (
		   <h1>hell word</h1>,
		   <h2>{this.state.date.toLocaleTimeString()}</h2>
		)
    }
}

Props

state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。​

以下实例创建一个 Mytitle 组件，属性 title 是必须的且是字符串，非字符串类型会自动转换为字符串 ：

var title = "小瓜皮";
// var title = 123;
class MyTitle extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.title}</h1>
    );
  }
}
 
MyTitle.propTypes = {
  title: PropTypes.string
};
ReactDOM.render(
    <MyTitle title={title} />,
    document.getElementById('example')
);

Props 验证使用 propTypes，它可以保证我们的应用组件被正确使用，React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。当向 props 传入无效数据时，JavaScript 控制台会抛出警告。

事件处理

//HTML 通常写法是：
<button onclick="activateLasers()">
  激活按钮
</button>

//React 中写法为：
class LoggingButton extends React.Component {
  // 这个语法确保了 `this` 绑定在  activateLasers中
  // 这里只是一个测试
  activateLasers= () => {
    console.log('this is:', this);
  }
 
  render() {
    return (
      <button onClick={this.activateLasers}>
        激活按钮
      </button>
    );
  }
}

必须谨慎对待 JSX 回调函数中的 this，类的方法默认是不会绑定 this 的。如果你忘记绑定 this.activateLasers并把它传入 onClick, 当你调用这个函数的时候 this 的值会是 undefined。

条件渲染

React 中的条件渲染和 JavaScript 中的一致，使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素，然后让 React 根据它们来更新 UI。

//两个组件
function UserGreeting(props) {
  return <h1>欢迎回来!</h1>;
}
function GuestGreeting(props) {
  return <h1>请先注册。</h1>;
}

创建一个 Greeting 组件，它会根据用户是否登录来显示其中之一：

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}
 
ReactDOM.render(
  // 尝试修改 isLoggedIn={true}:
  <Greeting isLoggedIn={false} />,
  document.getElementById('example')
);

列表 & Keys

使用 map() 方法遍历数组生成了一个 1 到 5 的数字列表:，组件接收数组参数，每个列表元素分配一个 key，不然会出现警告 a key should be provided for list items，意思就是需要包含 key：

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}
 
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('example')
);

React 组件生命周期

组件的生命周期可分成三个状态：

  • Mounting(挂载)：已插入真实 DOM
  • Updating(更新)：正在被重新渲染
  • Unmounting(卸载)：已移出真实 DOM
    在这里插入图片描述
class Button extends React.Component {
  constructor(props) {
      super(props);
      this.state = {data: 0};
      this.setNewNumber = this.setNewNumber.bind(this);
  }
  
  setNewNumber() {
    this.setState({data: this.state.data + 1})
  }
  render() {
      return (
         <div>
            <button onClick = {this.setNewNumber}>INCREMENT</button>
            <Content myNumber = {this.state.data}></Content>
         </div>
      );
    }
}
 
 
class Content extends React.Component {
  componentWillMount() {
      console.log('Component WILL MOUNT!')
  }
  componentDidMount() {
       console.log('Component DID MOUNT!')
  }
  componentWillReceiveProps(newProps) {
        console.log('Component WILL RECEIVE PROPS!')
  }
  shouldComponentUpdate(newProps, newState) {
        return true;
  }
  componentWillUpdate(nextProps, nextState) {
        console.log('Component WILL UPDATE!');
  }
  componentDidUpdate(prevProps, prevState) {
        console.log('Component DID UPDATE!')
  }
  componentWillUnmount() {
         console.log('Component WILL UNMOUNT!')
  }
 
    render() {
      return (
        <div>
          <h3>{this.props.myNumber}</h3>
        </div>
      );
    }
}
ReactDOM.render(
   <div>
      <Button />
   </div>,
  document.getElementById('example')
);

挂载
当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：
constructor(): 在 React 组件挂载之前，会调用它的构造函数。
getDerivedStateFromProps(): 在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。
render(): render() 方法是 class 组件中唯一必须实现的方法。
componentDidMount(): 在组件挂载后（插入 DOM 树中）立即调用。
render() 方法是 class 组件中唯一必须实现的方法，其他方法可以根据自己的需要来实现。

更新
每当组件的 state 或 props 发生变化时，组件就会更新。
当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：
getDerivedStateFromProps(): 在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。根据 shouldComponentUpdate() 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。
shouldComponentUpdate():当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。
render(): render() 方法是 class 组件中唯一必须实现的方法。
getSnapshotBeforeUpdate(): 在最近一次渲染输出（提交到 DOM 节点）之前调用。
componentDidUpdate(): 在更新后会被立即调用。
render() 方法是 class 组件中唯一必须实现的方法，其他方法可以根据自己的需要来实现。

卸载
当组件从 DOM 中移除时会调用如下方法：
componentWillUnmount(): 在组件卸载及销毁之前直接调用。

风语者！平时喜欢研究各种技术，目前在从事后端开发工作，热爱生活、热爱工作。

站长推荐