React 入门

Posted 2020-11-23 littlepage

1.安装

• 1.npm install -g create-react-app 安装脚手架

• 2.create-react-app pros-name 初始化

• 3.react的api比较少，基本一次，之后不用看文档了，核心js功力

2.React&ReactDom

• 删除src下所有代码，新建index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(<App/>,document.querySelector('#root'))

• 新建App.js

import React from 'react'

function App(){
    return (
        <h1>HelloWorld</h1>
    )
}

export default App

• 上述代码有困惑的地方，首先是JSX语法

ReactDOM.render(<App/>,document.querySelector('#root'))

类似js和html的混合，我们称JSX，核心是js实现

3.数据绑定

• 我们使用大括号进行绑定数据

function App(){
    const name = 'steve yu'
    return (
        <div>
            <h1>{name}</h1>
        </div>
    )
}

• 或者我们还可以进行绑定对象

function formatName(user){
    return user.firstName+' '+user.lastName
}
function App(){
    const user = {firstName:'steve',lastName:'yu'}
    return (
        <div>
            <h1>{formatName(user)}</h1>
        </div>
    )
}

4.组件开发

• 函数类型的组件

//函数类型的组件
export function Welcome1(){
    return (
        <div>
            welcome1
        </div>
    )
}

• 基于类的组件

//基于类的组件
export class Welcome2 extends React.Component{
    render(){
        return <div>welcome2</div>
    }
}

• 调用组件

function App() {
  return (
    <div>
      <Welcome1></Welcome1>
      <Welcome2></Welcome2>
    </div>
  );
}

5.制作一个时钟组件

• state保存时间状态，然后componentDidMount进行装载后每隔1秒进行刷新时间，最后在卸载组件的时候进行清除定时器
• 如果数据需要修改，并且同时响应页面变化，我们需要放到state中，并且使用setState来修改数据

export default class Clock extends Component{
    state = {
        date : new Date()
    }

    componentDidMount(){
        this.timer = setInterval(()=>{
            this.setState({
                date: new Date()
            })
        },1000)
    }

    componentWillUnmount(){
        clearInterval(this.timer)
    }
    
    render(){
        return (
            <div>
                {this.state.date.toLocaleTimeString()}
            </div>
        )
    }
}

6.条件渲染和列表渲染（props属性传递）

export default class Cart extends Component{
    constructor(props){
        super(props)
        this.state = {
            goods : [
                {id:1,text:'milk'},
                {id:2,text:'banana'},
                {id:3,text:'apple'}
            ]
        }
    }
    render(){
        return(
            <div>
                {/* 条件渲染 */}
                {this.props.title && <h1>{this.props.title}</h1>}
                {/* 列表渲染 */}
                <ul>
                    {this.state.goods.map(good=>
                        <li key={good.id}>{good.text}</li>
                    )}
                </ul>
            </div>
        )
    }
}

7.事件监听

React中使用onClick类似写法来监听事件，注意this绑定问题，react里严格遵循单项数据流，没有数据的双向绑定，所以输入框要设置value和onChange