React 入门

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(,document.querySelector('#root'))

• 新建App.js

import React from 'react'

function App(){
    return (
        
HelloWorld
    )
}

export default App

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

ReactDOM.render(,document.querySelector('#root'))

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

3.数据绑定

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

function App(){
    const name = 'steve yu'
    return (
        

            
{name}
        
    )
}

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

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

            
{formatName(user)}
        
    )
}

4.组件开发

• 函数类型的组件

//函数类型的组件
export function Welcome1(){
    return (
        

            welcome1
        
    )
}

• 基于类的组件

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

• 调用组件

function App() {
  return (
    

      
      
    
  );
}

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 (
            

                {this.state.date.toLocaleTimeString()}
            
        )
    }
}

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(
            

                {/* 条件渲染 */}
                {this.props.title && 
{this.props.title}
}
                {/* 列表渲染 */}
                

                    {this.state.goods.map(good=>
                        
{good.text}
                    )}
                
            
        )
    }
}

7.事件监听

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