react框架 - 蓝蓝设计_UI设计公司

帝皇彩票官网

react框架

2020-3-18 释然 前端及开发文章及欣赏

环境准备
创建项目

npx create-react-app my-react

进入项目并启动

cd my-react && npm start
1
src/index.js
先把src里面的东西全部删掉,重写了index.js

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component{
render(){
return (
<div>Hellow, World</div>
)
}
}

ReactDOM.render(<App/>, document.getElementById('root'));

JSX
一个React组件中,render方法中return出去的内容就是这个组件将要渲染的内容,然后Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。

React.createElement(
  'div',
  {},
  'Hello, World'
)

React.createElement() 接收三个参数:
第一个参数是必填,传入的是似HTML标签名称: ul, li, div;
第二个参数是选填,表示的是属性: className;
第三个参数是选填, 子节点: 要显示的文本内容;
React.createElement() 会预先执行一些检查,以帮助你编写无错代码,但实际上它创建了一个这样的对象:

// 注意:这是简化过的结构
const element = {
  type: 'div',
  props: {
    className: '',
    children: 'Hello, world!'
  }
};

元素渲染
与浏览器的 DOM 元素不同,React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。
想要将一个 React 元素渲染到根 DOM 节点中,只需把它们一起传入 ReactDOM.render():

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

render方法接收两个参数,第一个参数为我们的 React 根级组件,第二个参数接收一个 DOM 节点,代表我们将把和 React 应用挂载到这个 DOM 节点下,进而渲染到浏览器中。

组件 & props
组件,从概念上类似于 JavaScript 函数。它接受任意的入参(即 “props”),并返回用于描述页面展示内容的 React 元素。
函数组件:

function Welcome(props){
renter (
<h1> Hello, {props.name} </h1>
)
}
<Welcome name="World"/>

该函数是一个有效的 React 组件,因为它接收唯一带有数据的 “props”(代表属性)对象与并返回一个 React 元素。这类组件被称为“函数组件”,因为它本质上就是 JavaScript 函数。
class组件:

class Welcome extends React.Component {
render(){
renter (
<h1> Hello, {thhis.props.name} </h1>
)
}
}
<Welcome name="World"/>

组件名称必须以大写字母开头。
组件无论是使用函数声明还是通过 class 声明,都决不能修改自身的 props。

State & 生命周期
State 与 props 类似,但是 state 是私有的,并且完全受控于当前组件。

class Clock extends React.Component {
constructor(props){
super(props)
this.state = {
date : new Date()
}
}
componentDidMount() {
//这里是Clock组件第一次被渲染到DOM时会调用,也就是挂载
}

componentWillUnmount() {
//当DOM组件Clock被删除时,会调用,也就是卸载
}
render(){
return (
<div>
<h1>Hello, World</h1>
<h2>It's {this.state.date.toLocaleTimeString()}</h2>
</div>
)
}
}

修改state中数据:

class Clock extends React.Component {
constructor(props){
super(props)
this.state = {
date: new Date()
}
}
componentDidMount() {
//这里是Clock组件第一次被渲染到DOM时会调用,也就是挂载
this.timer = setInterval(()=>{
this.tick()
},1000)
}

tick(){
this.setState({
date: new Date()
})
}

componentWillUnmount() {
//当DOM组件Clock被删除时,会调用,也就是卸载
clearInterval(this.timer)
}
render(){
return (
<div>
<h1>Hello, World</h1>
<h2>It's {this.state.date.toLocaleTimeString()}</h2>
</div>
)
}
}

不要直接修改 State,构造函数是唯一可以给 this.state 赋值的地方

this.setState({name: 'World'})
1
State 的更新可能是异步的,要解决这个问题,可以让setState接受一个函数而不是一个对象,这个函数用上一个 state 作为第一个参数,将此次更新被应用时的 props 做为第二个参数:

this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

事件处理
React 事件的命名采用小驼峰式(camelCase),而不是纯小写。
使用 JSX 语法时你需要传入一个函数作为事件处理函数,而不是一个字符串。
在 React 中一个不同点是你不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault 。例如,传统的 HTML 中阻止链接默认打开一个新页面,你可以这样写:

<a href="#" onclick="console.log('The link was clicked.'); return false">
  Click me
</a>

在 React 中,可能是这样的:

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

class函数中绑定this

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // 此语法确保 `handleClick` 内的 `this` 已被绑定。
    return (
      <button onClick={() => this.handleClick()}>
        Click me
      </button>
    );
  }
}

在循环中,通常我们会为事件处理函数传递额外的参数

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
1
2
列表和key

function ListItem(props) {
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <ListItem key={number.toString()}  value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

语法
在 JSX 中所有的属性都要更换成驼峰式命名,比如 onclick 要改成 onClick,唯一比较特殊的就是 class,因为在 JS 中 class 是保留字,我们要把 class 改成 className 。

标签: react框架

Powered by sitemap
北京赛车怎么玩 博发彩票开户 状元彩票计划 桔子彩票平台 帝皇彩票平台 状元彩票官网 状元彩票官网 桔子彩票官网 博发彩票登陆 北京赛车pk10玩法