react入门 2021最新版

最新推荐文章于 2024-08-23 07:58:44 发布

努力努力再努力12138

最新推荐文章于 2024-08-23 07:58:44 发布

阅读量595

点赞数

分类专栏：前端文章标签： react

本文链接：https://blog.csdn.net/weixin_43490111/article/details/115055416

版权

前端专栏收录该内容

29 篇文章 1 订阅

订阅专栏

可在官网教程开始前食用，简单易懂，干货

1.安装

1.node.js安装
2.对应文件夹中输入命令（cmd）
npx create-react-app my-app
cd my-app
npm start

2.什么是react

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.
1.声明式的，高效的，构建UI界面的js库，能够把小的，独立的组件构成复杂的UI
2.我们使用组件告诉react我们想在屏幕上看到什么
3.当数据变化时，react会快速重新更新，重新渲染组件

3.组件

组件分为类，函数。

3.1 组件类
必须有render(),必须继承React.Component

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

props ：组件会接受的参数
通过pros传递数据
从 Board 组件传递一个名为 value 的 prop 到 Square

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;
  }
}

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}
      </button>
    );
  }
}

render方法： 1.返回视图层次，你想在屏幕上看到的内容
例：返回react元素（是js对象，你可以存储在变量中或作为参数传递）
2.可渲染自定义组件如通过 <ShoppingList /> 来表示整个购物清单组件

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h1', /* ... h1 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

jsx：js拓展，你可把任何带括号的js表达式放在jsx中

state ：实现所谓“记忆”的功能
1.在React 组件的构造函数中设置 this.state（组件的私有属性）来初始化 state

class Square extends React.Component {
  constructor(props) {
    super(props);
    //定义其子类的构造函数,必须以 super(props) 开头
    this.state = {
      value: null,
    };
    //每次在组件中调用 setState 时，React 都会自动更新其子组件
  }

  render() {
    return (
      <button className="square" onClick={() => alert('click')}>
        {this.props.value}
      </button>
    );
  }
}

数据同步共享 ：当你遇到需要同时获取多个子组件数据，或者两个组件之间需要相互通讯的情况时，需要把子组件的 state 数据提升至其共同的父组件当中保存。之后父组件可以通过 props 将状态数据传递到子组件当中。这样应用当中所有组件的状态数据就能够更方便地同步共享了。

点击传递数据：事件的监听 prop 命名为 on[Event]，将处理事件的监听方法命名为 handle[Event]
1.每一个 Square 被点击时，Board 提供的 onClick 函数就会触发
2.由于 Board 把 onClick={() => this.handleClick(i)} 传递给了 Square，所以当 Square 中的事件处理函数触发时，其实就是触发的 Board 当中的 this.handleClick(i) 方法。

 renderSquare(i) {
    return (
      <Square
        value={this.state.squares[i]}
        onClick={() => this.handleClick(i)}
      />
    );
  }

class Square extends React.Component {
  render() {
    return (
      <button
        className="square"
        onClick={() => this.props.onClick()}
      >
        {this.props.value}
      </button>
    );
  }
}

3.2 组件函数
只要组件类没有保存当前状态（使用state）就可以使用组件函数，更简洁一些

使用副本进行数据改动保持不变性

example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <div id="app">

    </div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
    <script src="../src/index.js"></script>
  </body>
</html>

#app {
  width: 500px;
  margin: 0 auto;
}

.white {
  color:rgb(111, 223, 223);
}

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

//组件函数
// function HelloReact() {
//   return <h1>hello,react!</h1>
// }

const HelloReact = (props) => {
  const styleObj = {
    color: "red",
    fontSize: "24px",
  };
  return (
    <div style={styleObj}>
      <h1>hello,{props.name}! age is : {props.age}</h1>
      <p className="white">welcome to react world</p>
    </div>
  );
}

//构建类，有状态就用
class HelloReact2 extends React.Component {
  //记录状态用state，必须被放在constructor中并用this.state初始化
  //constructor中必须先用super(props)
  //总结：要用state，就要申明constructor,super(props),this.state
  constructor(props) {
    super(props);
    this.state = {
      name: props.name,
    }
  }

  handleChange(e) {
    this.setState({
      name: e.target.value,
    })
  }

  render() {
    return (
    <div>
      <HelloReact name={this.state.name} age={18} />
      <input type="text" placeholder="input sth" onChange={this.handleChange.bind(this)}/>
    </div>)
  }
}

//渲染，第一参数组件，第二个：渲染到哪里 
//name传递参数
ReactDOM.render(<HelloReact2  name="magic"/>, document.getElementById('app'));

努力努力再努力12138

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
react入门 2021最新版

可在官网教程开始前食用，简单易懂，干货1.安装1.node.js安装2.对应文件夹中输入命令（cmd）npx create-react-app my-appcd my-appnpm start2.什么是reactReact is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small an
复制链接

扫一扫

专栏目录