React基础学习知识笔记

React项目的核心就是index.js

第一个程序

import React from 'react';
import ReactDOM from 'react-dom';ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

ReactDOM.render 有两个参数，一个是JSX=JavaScript+XML (虚拟dom)，另一个就是绑定的dom节点

JSX

const element = <h1>Hello, world!</h1>;
它被称为 JSX，是一个 JavaScript 的语法扩展。
我们建议在 React 中配合使用 JSX，
JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。
JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。

在 JSX 中嵌入表达式

1.变量嵌入

const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

2.函数嵌入:调用 JavaScript 函数

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

3.React只更新需要更新的值

//React 只更新需要更新的值
function dingshiqi() {
  const appJSX  = (
    <div>
      <h1>Hello React</h1>
      <h2>{new Date().toLocaleTimeString()}</h2>
    </div>
  );

  ReactDOM.render(
    appJSX,
    document.getElementById('root')
  );
}
 setInterval(dingshiqi, 1000);

4.JSX 特定属性

可以通过使用引号，来将属性值指定为字符串字面量：

const element = <div tabIndex="0"></div>;

也可以使用大括号，来在属性值中插入一个 JavaScript 表达式：

const element = <img src={user.avatarUrl}></img>;

在属性中嵌入 JavaScript 表达式时，不要在大括号外面加上引号。你应该仅使用引号（对于字符串值）或大括号（对于表达式）中的一个，对于同一属性不能同时使用这两种符号。因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。

例如，JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex

将一个元素渲染为 DOM

想要将一个 React 元素渲染到根 DOM 节点中，只需把它们一起传入 ReactDOM.render()：React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。

根据我们已有的知识，更新 UI 唯一的方式是创建一个全新的元素，并将其传入 ReactDOM.render()。

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

集合遍历

集合遍历||必须要有key属性，区分不同的属性，否则会报错

function forListByLI() {
  const arrayList = ['2','3','4','5'];
  const jsxIn = (<ul>
    {arrayList.map((item,index)=>{
      return <li key={index}>{item}</li>
    })}
  </ul>);
  return jsxIn;
}
ReactDOM.render(
  <div>{forListByLI()}</div>,
  document.getElementById('root')
);

过滤元素||alt+shfit赋值到下一行

function forListByLIFilter() {
  const arrayList =[
    {id:1,price:100,titel:"小米"},
    {id:2,price:200,titel:"IQoo"},
    {id:3,price:400,titel:"Relme"},
    {id:4,price:300,titel:"RedMe"}
  ];
  const jsxIn = (<ul>
    {arrayList.map((item,index)=>{
      return (item.price>200)?<li key={index}>{item.titel}</li>:null;
    })}
  </ul>);
  return jsxIn;
}

ReactDOM.render(
  <div>{forListByLIFilter()}</div>,
  document.getElementById('root')
);

函数组件与 class 组件

//React 核心思想就是组件化开发。就是这个JSX，其实就是玩JavaScript

//组件开发声明两个方式：函数或者类

定义组件最简单的方式就是编写 JavaScript 函数：

函数声明：名字首字母一定大写，一定返回值有 函数式组件是props&组件接收

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

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

你同时还可以使用 ES6 的 class 来定义组件：

类声明组件:首字母一定大写，必须继承React.Component这个基类，否则无法被认为React的JSX;必须使用render函数：将虚拟dom渲染为真实dom,一定需要返回一个JSX对象：props关联JSX传入对象

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

2.渲染组件 React 元素也可以是用户自定义的组件：

function Welcome(props) {
	return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;ReactDOM.render(
  element,
  document.getElementById('root')
);

外部导入自己的组件

外部的组件JS

import React,{Component} from "react";
class MyClassAppFile extends Component{
    constructor(props){
        //React
        super(props);
    }
    //必须使用render函数：将虚拟dom渲染为真实dom
    render(){
      const jsxIn01 = (

      <div>
          <h2>myClassApp,{this.props.name}</h2>
          {/* 使用组件 */}
          <MyBtn tital="提交"></MyBtn>
          <MyBtn tital="删除"></MyBtn>
          <MyBtn tital="修改"></MyBtn>
          <MyBtn tital="添加"></MyBtn>
      </div>
      );
      //一定需要返回一个JSX对象：props关联JSX传入对象
      return jsxIn01;
    }

  }
   //复用组件：
class MyBtn extends Component{
    render(){
        return(
            <button>{this.props.tital}</button>
        );
    }
}
  //安装插件：react ，，rpc一键生成组件
  export default MyClassAppFile;

//导入自己的组件
import MyClassAppFile from './MyApp';
//使用JSX标签
const myJSX =  <MyClassAppFile name="guotongFile"/>;
//dom渲染
ReactDOM.render(
  myJSX,
  document.getElementById('root')
);

Props 的只读性

组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。

所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

将函数组件转换成 class 组件

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(    element,    document.getElementById('root')  );}

setInterval(tick, 1000);

通过以下五步将 Clock 的函数组件转成 class 组件：

创建一个同名的 ES6 class，并且继承于 React.Component。

添加一个空的 render() 方法。

将函数体移动到 render() 方法之中。

在 render() 方法中使用 this.props 替换 props。

删除剩余的空函数声明。

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

正确地使用 State

State 的更新可能是异步的

出于性能考虑，React 可能会把多个 setState() 调用合并成一个调用。

因为 this.props 和 this.state 可能会异步更新，所以你不要依赖他们的值来更新下一个状态

关于 setState() 你应该了解三件事：

不要直接修改 State

例如，此代码不会重新渲染组件：

// Wrong

this.state.comment = 'Hello';

而是应该使用 setState():

// Correct

this.setState({comment: 'Hello'});

构造函数是唯一可以给 this.state 赋值的地方：

State 的更新会被合并

当你调用 setState() 的时候，React 会把你提供的对象合并到当前的 state。

数据是向下流动的

不管是父组件或是子组件都无法知道某个组件是有状态的还是无状态的，并且它们也并不关心它是函数组件还是 class 组件。

这就是为什么称 state 为局部的或是封装的的原因。除了拥有并设置了它的组件，其他组件都无法访问。

组件可以选择把它的 state 作为 props 向下传递到它的子组件中

React 事件

React 事件的命名采用小驼峰式（camelCase），而不是纯小写。

使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。

例如，传统的 HTML：

<button onclick="activateLasers()">
  Activate Lasers
</button>

在 React 中略微不同：

<button onClick={activateLasers}>  Activate Lasers
</button>

在 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>
  );
}

在这里，e 是一个合成事件。React 根据 W3C 规范来定义这些合成事件，所以你不需要担心跨浏览器的兼容性问题。如果想了解更多，请查看 SyntheticEvent 参考指南。

方法绑定 this。

// 此语法确保 `handleClick` 内的 `this` 已被绑定。  // 注意: 这是 *实验性* 语法。
handleClick = () => {
console.log('this is:', this);
}
//推荐
 // 此语法确保 `handleClick` 内的 `this` 已被绑定。
return (
	<button onClick={() => this.handleClick()}>
	Click me
      </button>
    );

受控组件

在 HTML 中，表单元素（如<input>、 <textarea> 和 <select>）之类的表单元素通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。

	class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('提交的名字: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          名字:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        </label>
        <input type="submit" value="提交" />
      </form>
    );
  }
}

Select

	class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'coconut'};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('你喜欢的风味是: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          选择你喜欢的风味:
          <select value={this.state.value} onChange={this.handleChange}>            <option value="grapefruit">葡萄柚</option>
            <option value="lime">酸橙</option>
            <option value="coconut">椰子</option>
            <option value="mango">芒果</option>
          </select>
        </label>
        <input type="submit" value="提交" />
      </form>
    );
  }
}

官网文档学习地址：https://react.docschina.org/docs/lifting-state-up.html