React初探

安装react脚手架

---

// 方式一
yarn global add create-react-app
create-react-app react-test
// 方式二
npx create-react-app react-test

react 负责逻辑控制

reactDom负责渲染

保存代码后代码被格式化了？？

---

JSX是什么？

---

看起来是 js和 html的混合体，被称之为 JSX，实际核心逻辑完全是 js实现

基本语法

---

// App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

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

function App() {
    const name = 'pj';
    const user = {
        firstName: 'pj',
        lastName: 'tom'
    }
    const jsx = 
hellp jerry
;
    return (
        

            {/* 表达式 */}
            
{name}
            
{formatName(user)}

            {/* 属性 */}
            

            {/* jsx也是表达式 */}
            {jsx}
        
    );
}

export default App;

创建组件

---

// CompType.js

import React from 'react';
import { render } from 'react-dom';

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

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

// App.js

import React from 'react';
import './App.css';
import { Welcome1, Welcome2 } from './components/CompType';

function App() {
    return (
        

            {/* 使用其他组件 */}
            
            
        
    );
}

export default App;

父子组件传值

---

// CompType.js

import React from 'react';
import { render } from 'react-dom';

// 函数类型的组件
export function Welcome1(props){
    return 
Welcome1, {props.name}
;
}

// 基于类的组件
export class Welcome2 extends React.Component{
    render(){
        return 
Welcome2, {this.props.name}
;
    }
}

// App.js

import React from 'react';
import './App.css';
import { Welcome1, Welcome2 } from './components/CompType';

function App() {
    return (
        

            {/* 使用其他组件 */}
            
            
        
    );
}

export default App;

state和状态改变setState

---

// Clock.js

import React, {Component} from 'react';

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()}
            
        )
    }
}

// App.js

import React from 'react';
import './App.css';
import Clock from './components/Clock';

function App() {
    return (
        

            {/* state和状态改变setState */}
            
        
    );
}

export default App;

条件渲染 && 列表渲染

---

// CartSample.js

import React, {Component} from 'react'

export default class CartSample extends Component {
    // 状态的初始化一般放在构造器中
    constructor(props){
        super(props);

        this.state = {
            goods: [
                {
                    id: 1,
                    text: 'web全站架构师'
                },
                {
                    id: 2,
                    text: 'phthoy'
                },
            ]
        }
    }

    render() {
        // const title = this.props.title ? 
{this.props.title}
 : null;
        return (
            

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

                {/* 列表渲染 */}
                

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

事件绑定

---

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

// 回调函数为箭头函数
textChange = e => {
    this.setState({
        text: e.target.value
    })
}

// 如果不写成箭头函数，需要对this作用域进行绑定修改，所以为了简便，建议使用箭头函数形式
textChange(e) {
    this.setState({
        text: e.target.value
    })
}

constructor(props){
    this.textChange = this.textChange.bind(this);
}

若是想在事件中传递参数

 this.addToCart(good)}>加购

// 加购函数
addToCart = (good) => {}

父子组件通信

---

宗旨：孩子就当个傻孩子，事件都由老爹来处理，孩子只要调用就可以。保持单向数据流

// 父组件


minus = () => {}
add = () => {}

// 子组件
import React, { Component } from 'react';

export default class Cart extends Component {
    constructor(props){
        super(props);
    }

    render(){
        return (
            
                    {this.props.data.map(d => (
                        
                    ))}
                

                

                            
{d.text}
                            

                                 this.props.minus(d)}>-
                                {d.count}
                                 this.props.add(d)}>+
                            
                        
            
        )
    }
}