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 = <p>hellp jerry</p>;
    return (
        <div>
            {/* 表达式 */}
            <h1>{name}</h1>
            <h1>{formatName(user)}</h1>

            {/* 属性 */}
            <img src={logo} style={{width: '100px'}} />

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

export default App;

创建组件

---

// CompType.js

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

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

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

// App.js

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

function App() {
    return (
        <div>
            {/* 使用其他组件 */}
            <Welcome1></Welcome1>
            <Welcome2></Welcome2>
        </div>
    );
}

export default App;

父子组件传值

---

// CompType.js

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

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

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

// App.js

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

function App() {
    return (
        <div>
            {/* 使用其他组件 */}
            <Welcome1 name="some content"></Welcome1>
            <Welcome2 name="some content"></Welcome2>
        </div>
    );
}

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 (
            <div>
                {this.state.date.toLocaleTimeString()}
            </div>
        )
    }
}

// App.js

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

function App() {
    return (
        <div>
            {/* state和状态改变setState */}
            <Clock></Clock>
        </div>
    );
}

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 ? <h1>{this.props.title}</h1> : null;
        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>
        )
    }
}

事件绑定

---

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

<input type="text" value={this.state.text} onChange={this.textChange} />

// 回调函数为箭头函数
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);
}

若是想在事件中传递参数

<button onClick={() => this.addToCart(good)}>加购</button>

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

父子组件通信

---

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

// 父组件
<Cart data={this.state.cart} minus={this.minus} add={this.add}></Cart>

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

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

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

    render(){
        return (
            <table>
                <tbody>
                    {this.props.data.map(d => (
                        <tr key={d.id}>
                            <td>{d.text}</td>
                            <td>
                                <button onClick={() => this.props.minus(d)}>-</button>
                                {d.count}
                                <button onClick={() => this.props.add(d)}>+</button>
                            </td>
                        </tr>
                    ))}
                </tbody>
            </table>
        )
    }
}