前端-React(基础知识)

  • React 是一个用于构建用户界面的 JAVASCRIPT 库。
  • 用 DOM 的方式将需要的组件秒加,用不着的秒删。React 扮演着 MVC 结构中 V 的角色
  • React 是一个用于构建用户界面的 JAVASCRIPT 库。
  • JSX 是 JavaScript 语法的扩展。

在开始学习 React 之前,您需要具备以下基础知识:

HTML5
CSS
JavaScript

基本含义:

  • create-react-app 项目名 创建
  • render 函数即渲染函数,程序主入口,对模板进行渲染
  • *let 和 const:*通过 const 定义的变量与 let 变量类似,但不能重新赋值

jsx特点
花括号{}
别名:className 代替class ,htmlFor代替html。
前端-React(基础知识)_第1张图片
前端-React(基础知识)_第2张图片

例子
前端-React(基础知识)_第3张图片
结果:
前端-React(基础知识)_第4张图片

html被编译成什么呢?
前端-React(基础知识)_第5张图片
前端-React(基础知识)_第6张图片
在这里插入图片描述
这里,Welcome不是字符串,是一个构造方法,所以首字母是大写

前端-React(基础知识)_第7张图片
这些object也就是ReactElement对象,通过React.createElement方法与conponent的jsx代码互换,同样可以运行。

综上所述:

  • jsx是一种语法糖-React.createElement()的语法糖,
  • ReactElement对象,本质上也是js的object。复杂的jsx,也就是object嵌套

Props/State/Forms 属性和状态
Props(属性)

  • 组件像一个函数一样,接收特定的输入(Props),产生特定的输出(react elements)
  • V=f(props)
  • 在一个组件中props是不可变的

npm install bootstrap --save
例子:
前端-React(基础知识)_第8张图片
前端-React(基础知识)_第9张图片

函数式声明方式:

const NameCard = {props}=>{
return(内容)
}

前端-React(基础知识)_第10张图片
纯函数值不能被改变
react-Component,所有的组件必须像纯函数一样使用props,在一个组件中props是不可变的,state却可以在不改变上述条件下使组件动态的输出

state状态
比如下拉菜单的显示隐藏,一组数据的加载(loading,再显示数据),之前只有一种方法更新界面,就是调用ReactDOM.Rander方法.

  • 状态是私有的完全受控于当前组件,可以动态改变。
  • 属性是外部传入的,不可改变
  • 更新状态的唯一方法就是this.setState()
    实例:完成点赞按钮
    区别:
    js: οnclick=“increasLikes()”
    react:onClick={this.increasLikes}
class LikesButton extends React.Component{
    constructor(props){
        super(props)
        this.state={
            likes:0
        }
        this.increasLikes=this.increasLikes.bind(this)
    }

    increasLikes(){
        // this.setState({
        //     likes:++this.state.likes
        // })
        alert("你好")
        console.log(this)    // this是没有绑定的返回undefined
    }
    render() {
        return(
            <div>
                <button
                    type="button"
                    className="buttons btn-lg"
                    onClick={this.increasLikes}
                >
                    {this.state.likes}</button>
            </div>
        )
    }
}
export default LikesButton;

前端-React(基础知识)_第11张图片

在js的类中,this是没有自动绑定的,所以当访问回调函数onClick={this.increasLikes}时,返回是undefined,手动绑定
this.increasLikes=this.increasLikes.bind(this)
方法2:
es6有箭头函数的概念,就不需要额外绑定了
onClick={()=>{this.increasLikes()}}
前端-React(基础知识)_第12张图片
最终效果:

class LikesButton extends React.Component{
    constructor(props){
        super(props)
        this.state={
            likes:0
        }
    }
    increasLikes(){
        this.setState({
            likes:++this.state.likes
        })
    }
    render() {
        return(
            <div>
                <button
                    className="buttons"
                    onClick={()=>{this.increasLikes()}}
                >{this.state.likes}</button>
            </div>
        )
    }
}
export default LikesButton;

在这里插入图片描述

生命周期

import React from 'react'

class DigitalClock extends React.Component{
    constructor(props){
        super(props)
        this.state={
            date:new Date()
        }

    }
    componentDidMount() {
        this.timer=setInterval(()=>{
            this.setState({
                date:new Date()
            })
        },1000)
    }
    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log(prevState)
    }

    componentWillUnmount() {
        clearInterval(this.timer)
    }

    render() {
        return(
            <div>
                <h1>{this.state.date.toLocaleTimeString()}</h1>
            </div>
        )
    }


}
export default DigitalClock;

forms表单

受控组件
import React from 'react'

//受控组件
class CommentBox2 extends React.Component{
    constructor(props){
        super(props)
        this.handlesub=this.handlesub.bind(this)
        this.state={
            value:''
        }


    }
    handlesub(ev){
alert(this.state.value)
        ev.preventDefault()
    }

    render() {
        return(
            <form onSubmit={this.handlesub}>
                <div>
                    <label>留言内容</label>
                    <input type='text' placeholder='请输入内容' value={this.state.value} onChange={(event)=>{this.setState({value:event.target.value})}}  />
                    <button type='submit'>留言</button>
                </div>

            </form>
        )
    }
}
export default CommentBox2
非受控组件
import React from 'react'

//非受控组件
class CommentBox2 extends React.Component{
    constructor(props){
        super(props)
        this.handlesub=this.handlesub.bind(this)



    }
    handlesub(ev){
alert(this.textinput.value)
        ev.preventDefault()
    }

    render() {
        return(
            <form onSubmit={this.handlesub}>
                <div>
                    <label>留言内容</label>
                    <input type='text' placeholder='请输入内容'  ref={(textinput)=>{this.textinput=textinput}}   />
                    <button type='submit'>留言</button>
                </div>

            </form>
        )
    }
}
export default CommentBox2

留言本实例,父子组件

App.js

import logo from './logo.svg';
import './App.css';
import React,{Component} from 'react'
import CommentList from './component/LiuYanBen/CommentList'
import CommentBox from './component/CommentBox'
class App extends Component {

  constructor(props){
    super(props)
    this.state={
      comments:['this is my first reply']
    }
    this.onAddComment=this.onAddComment.bind(this)
  }
  onAddComment(comment){
    this.setState({
      comments:[...this.state.comments,comment]
    })

  }
  render() {
    const {comments}=this.state
    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"></a>
          </header>
          <CommentList comments={comments}/>
          <CommentBox commentsLength={comments.length} onAddComment={this.onAddComment}  />
        </div>
    );
  }
}
export default App;

CommentList.js

import React from 'react'

const CommentList=({comments})=>{
    return(
        <div>
            <label>评论列表</label>
            <ul>
                {comments.map((comment,index)=>
                    <li key={index}> {comment}</li>)}

            </ul>
        </div>
    )
}
export default CommentList

CommentBox.js

import React from 'react'


class CommentBox extends React.Component{
    constructor(props){
        super(props)
        this.handlesub=this.handlesub.bind(this)
        this.state={
            commentsLength:this.props.commentsLength
        }


    }
    handlesub(ev){
        this.props.onAddComment(this.textinput.value)
        ev.preventDefault()
    }

    render() {
        return(

                <form onSubmit={this.handlesub}>
                    <div>
                    <label>留言内容</label>
                    <input type='text' placeholder='请输入内容' ref={(textinput)=>{this.textinput=textinput}} />
                    <button type='submit'>留言</button>
                    </div>
                    <p>已有{this.state.commentsLength}条评论</p>
                </form>
        )
    }
}
export default CommentBox

Context

  • prop属性是由上而下单向传递的
  • context提供了在组件中共享此类值的方法
  • 目的:共享那些对于组件来说全局共享的数据

AppButton.js

import React,{Component} from 'react'
import ThemeContext from'../../theme-context'
import ThemedBar from './ThemedBar'

const themer={
    light:{
        background:"blue",
        color:"red"
    },
    dark:{
        background:"black",
        color:"yellow"
    }

}

class AppButton extends Component{

    constructor(props){
        super(props)
        this.state={
            theme:'light'
        }
        this.changeTheme=this.changeTheme.bind(this)
    }

    changeTheme(themer){
        this.setState({
            theme:themer
        })
    }

    render() {
        return(
            <ThemeContext.Provider value={themer[this.state.theme]}>
            <div>
                <button onClick={()=>{this.changeTheme("light")}}>浅色主题</button>
                <button onClick={()=>{this.changeTheme("dark")}}>深色主题</button>

                <ThemedBar/>
            </div>
            </ThemeContext.Provider>
        )
    }
}
export default AppButton

ThemedBar.js

import React from 'react'
import ThemeContext from '../../theme-context'


const ThemedBar =()=>{
    return(
        <ThemeContext.Consumer>
            {
                theme=>{
                    return(
                        <div style={{backgroundColor:theme.background,color:theme.color}}>
                            样式区域
                            <button color={theme.color}>样式按钮</button>
                        </div>
                    )
                }
            }
        </ThemeContext.Consumer>
    )

}
export default ThemedBar

ThemeContext.js

import React from 'react'


const ThemeContext=React.createContext()

export default ThemeContext

你可能感兴趣的:(react.js,javascript)