React基础

特性

脚手架使用

1. 全局安装

npm install -g create-react-app

2.创建项目

create-react-app xxxxx
xxxxx为项目名称

3.切换目录
cd xxxxx
4.启动项目
npm start

出现这个就是启动成功

编写第一个react程序

进入src目录下的index.js

// 从 react 的包当中引入了 React。只要你要写 React.js 组件就必须引入Reactt
import React from 'react'
// ReactDOM 可以帮助我们把 React 组件渲染到页面上去，没有其它的作用了。它是从 react-dom 中引入的，而不是从 react 引入。
import ReactDOM from 'react-dom'

// ReactDOM里有一个render方法，功能就是把组件渲染并且构造 DOM 树，然后插入到页面上某个特定的元素上
ReactDOM.render(
// 这里就比较奇怪了，它并不是一个字符串，看起来像是纯 HTML 代码写在 JavaScript 代码里面。语法错误吗？这并不是合法的 JavaScript 代码, “在 JavaScript 写的标签的”语法叫 JSX- JavaScript XML。
<h1>欢迎进入React的世界</h1>,
// 渲染到哪里
document.getElementById('root')
)

组件化开发

class组件

快捷键 rcc
react创建组件的方式就是使用的类的继承

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

class App extends React.Component { render () {
return (

<h1>React</h1>
)
}
}
ReactDOM.render(
<App />, document.getElementById('root')
)

函数式组件

快捷键 rfc

import React from 'react'

export default function lenrn() {
  return (
    <div>lenrn</div>
  )
}

组件样式

行内样式

用class

事件绑定

绑定事件

采用on+事件名的方式

handler写法

• 不推荐在render里写箭头函数
• 推荐在组件内写箭头函数
• 在组件里定义一个非箭头的方法，然后在constructor里bind（this）

Ref的应用

1.给标签设置ref=“username”
通过这个获取this.refs.username , ref可以获取到应用的真实dom
2. 给组件设置ref=“username”
通过这个获取this.refs.username ,ref可以获取到组件对象
3.新写法

myRef = React.createRef()

<div ref={this.myRef}>hello</div>

访问this.myRef.current

组件的挂载方式

状态

定义state
第一种方式

第二种方式

更改状态

this.state 是纯js对象，无法直接更改，需要使用特殊的更改状态的方法setState

import React, { Component } from 'react'
export default class App extends Component {
    handle=()=>{
        this.setState({
            name:'xxxxxxxx',
            isLiked:!this.state.isLiked
        })
    }
  state = {
    name: 'React',
    isLiked: true
  }
  render () {
    return (
      <div>
        <h1>欢迎来到{this.state.name}的世界</h1>
        <button onClick={this.handle}>
          {
            this.state.isLiked ? '❤ 取消' : '🖤收藏'
          }
        </button>
      </div>
    )
  }
 }

setState有两个参数
第一个参数可以是对象，也可以是方法return一个对象，我们把这个参数叫做updater

• 参数是对象

this.setState({
 isLiked: !this.state.isLiked
 })

• 参数是方法

this.setState((prevState, props) => {
 return {
 isLiked: !prevState.isLiked
 }
 })

这个方法接收两个参数，第一个是上一次的state, 第二个是props

setState 是异步的，所以想要获取到最新的state，没有办法获取，就有了第二个参数，这是一个可选的回调函数

this.setState((prevState, props) => {
 return {
 isLiked: !prevState.isLiked
 }
 }, () => {
 console.log('回调里的',this.state.isLiked)
 })
 console.log('setState外部的',this.state.isLiked)

属性-props

props是正常是外部传入的，组件内部也可以通过一些方式来初始化的设置，属性不能被组件自己更改，但是你可以通过父组件主动重新渲染的方式来传入新的

属性是描述性质、特点的，组件自己不能随意更改。
在使用一个组件的时候，可以把参数放在标签的
属性当中，所有的属性都会作为组件
props 对象的键值。通过箭头函数创建的组件，需要通过函数的
参数来接收props :

(1) 在组件上通过key=value 写属性,通过this.props获取属性,这样组件的可复用性提高了。
(2)注意在传参数时候，如果写成isShow=“true” 那么这是一个字符串 如果写成isShow={true} 这个 是布尔值
(3){…对象} 展开赋值
(4) 默认属性值

.defaultProps = {
 }
 static defaultProps = {
 myname:"默认的myname",
 myshow:true
 }

（5) prop-types 属性验证

import propTypes from "prop-types";
 *.propTypes={
 name:propTypes.string,
 age:propTypes.number
 }      
static propTypes={
 myname:propTypes.string,
 myshow:propTypes.bool
 }

属性和状态区别

相同点：都是纯js对象，都会触发render更新，都具有确定性（状态/属性相同，结果相同）

1. 属性能从父组件获取，状态不能
2. 属性可以由父组件修改，状态不能
3. 属性能在内部设置默认值，状态也可以，设置方式不一样
4. 属性不在组件内部修改，状态要在组件内部修改
5. 属性能设置子组件初始值，状态不可以
6. 属性可以修改子组件的值，状态不可以

state 的主要作用是用于组件保存、控制、修改自己的可变状态。state组件自身修改，而外部不能访问也不能修改。你可以认为 state是一个局部的，只能被组件自身控制的数据源。state 中状态可以通过this.setState 方法进行更新，setState 会导致组件的重新渲染。

props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配置参数，组件内部无法控制也无法修改。除非外部组件主动传入新的 props不变。

没有 state 的组件叫无状态组件（stateless component），设置了 state 的叫做有状态组件（stateful component）。因为状态会带来管理的复杂性，我们尽量多地写无状态组件，尽量少地写有状态的组件。

渲染数据

• 条件渲染

 {
condition ? '渲染列表的代码' : '空空如也'
 }

• 列表渲染

const people = [{
 id: 1,
 name: 'Leo',
 age: 35
 }, {
 id: 2,
 name: 'XiaoMing',
 age: 16}]
 
 {
 people.map(person => {
 return (
 <dl key={person.id}>
 <dt>{person.name}</dt>
 <dd>age: {person.age}</dd>
 </dl>
 )
 })
 }

dangerouslySetInnerHTML
处于安全的原因，React当中所有表达式的内容会被转义，如果直接输入，标签会被当成文本。这时候就需要使用dangerouslySetHTML 属性，它允许我们动态设置innerHTML

render () {
 return (
 <div
 // 注意这里是两个下下划线 __html
 dangerouslySetInnerHTML={{__html: this.state.content}}
 )
 }
 }

表单受控组件与非受控组件

非受控组件

React要编写一个非受控组件，可以 使用 ref 来从 DOM 节点中获取表单数据，就是非受控组件。

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);//改变this指向
    this.input = React.createRef();
  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.current.value);
    event.preventDefault();
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={this.input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
 }

受控组件

在HTML表单元素中，如

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>

    );
  }