react笔记

1.react 不使用模板  

不是mvc框架   响应式  轻量级js库

2虚拟Dom

确保对界面上真正发生的部分进行实际的Dom操作，逐层次的来进行节点比较。

3.react 环境搭建

React  react-dom.js  babel.js   es6转es5 JSX转JavaScript

下载 npm I react  - - save   npm I react-dom - - save    npm I babel-standalone –save

4.jsx的语法

注释必须  {/* 这是注释的内容  */}

{ } 花括号里面可以进行计算

不能写class 因为这是javascript有的

写className

Map 循环有返回值，forEach循环没有返回值。

遍历对象key值，Object.keys(obj) 返回一个数组  含对象所有key值的

遍历对象的值  Object.keys(obj).map((I,v)=>{

              return <p key={i}>遍历属性：{v}-------------遍历属性值{obj[v]}</p>

 })

5.组件

高耦合低内聚：高耦合就是把逻辑紧密的内容放到一个组件里面，低内聚：把不同组件的依赖关系尽量弱化，每个组件尽可能的独立。

构建方式，组件属性 生命周期

组件分为3部分： 属性props  状态state  生命周期

组件名字必须以大写字母开头 可以写成单标签调用或者双标签调用

Props只读

组件无论是使用函数声明还是class声明，都不可更改props。

分为无状态组件和类组件

传值方法：           

  let obj={

            aa:"ll",

            bb:"89"

        }

<Clock {...obj}/>  解析后相当于aa=ll,bb=89, 传值多的时候可以用扩展运算符

或者 <Clock   aa=”123”  bb=””hfhffh/>

如果没有传值，可以设置默认传值，Clock.defaultProps = {aa:”123” }

Props 验证  验证传递过来的是否符合期望的类型或者要求，上线模式中取消props

6.State和生命周期

State是组件对内的接口，props是组件对外的接口

自身需要管理的数据，对内管理的属性是state

State是可变的，状态数据改变了，页面对应的绑定数据会自动进行改变。

使用状态 不能使用无状态组件，要使用class声明的组件。

State的用法： 写constructor 必须写super（） 指向父类的构造函数  this.setState 是异步的，可以自动触发 render进行数据的渲染

class Com extends React.Component {

            constructor(props) {

                super(props)

                this.state = {

                    aa: "123",

                }

            }

            render() {

                return (

                    <div>

                        <button onClick={() => { this.setState({ aa: 90 }) }}>gaibian</button>

                        <div>------{this.state.aa}</div>

                    </div>

                )

            }

        }

        ReactDOM.render(

            <Com />,

            document.getElementById('demo')

        );

如果想插入显示页面aa= <h1>123</h1>不能直接{this.State.aa} 应该<div dangerouslySetInner></div>

 dangerouslySetInnerHtml  是react 中innerHtml在浏览器Dom使用的替代品。

onChange 事件的行为与你期望的一样，每当表单 字段发生更改的，将会触发事件。

componentDidMount()方法会在组件已经被渲染到Domhou 运行，可以设置定时器。

ComponentWillUnmount()生命周期中清除计时器，使用this.setState()来时刻更新state。

不能直接修改State，用setState.state的更新可能是异步的。

This.props和this.state可能会异步更新，所以不要依赖他们的值来更新下一个。

State的更新可能会被合并

7.事件处理

React 事件的命名采用小驼峰式，不是纯小写。

使用jsx语法需要传入一个函数作为事件处理函数，而不是一个字符串。

React不能返回false的方式阻止默认行为。你必须显示的使用preventDefault。

e.preventDefault()；

8.条件渲染&列表渲染

条件渲染 ： if、三目运算符、&&

 render() {
    //   三目运算符
    // return <div>
    //     {this.state.isLogin ? (<div>jkdsjfsdjkfjdsjgk</div>):(
    //     <div>
    //         mima:<input /> <br/>
    //         user:<input /> <br/>
    //         <button onClick={this.login}>denglu</button>
    //     </div>
    //   )}
    // </div>

    // && 
    return (
      <div>
        {this.state.isLogin && <div>jkdsjfsdjkfjdsjgk</div>}
        {!this.state.isLogin && (
          <div>
            mima:
            <input /> <br />
            user:
            <input /> <br />
            <button onClick={this.login}>denglu</button>
          </div>
        )}
      </div>
    );

    // 条件语句
    // if (this.state.isLogin) {
    //   return <div>jkdsjfsdjkfjdsjgk</div>;
    // } else {
    //     return <div>
    //         mima:<input /> <br/>
    //         user:<input /> <br/>
    //         <button onClick={this.login}>denglu</button>
    //     </div>;
    // }
  }

列表渲染 数组map

return (
      <div>
        <ul>
          {this.state.arr.map((item) => {
            return <li key={item.id}>{item.name}</li>;
          })}
        </ul>
      </div>
    );

9.受控组件 & 非受控组件ref

 受控组件 即实现input的双向绑定

import React from "react";

class Test extends React.Component {

  constructor() {

    super();

    this.state = {

      userName: "",

      password: "",

    };

    this.inputRef = React.createRef(); //1.创建ref  将其赋值给一个变量，通过ref挂载在dom节点或组件上，该ref的current属性将能拿到dom节点或组件的实例

  }

 

  logintest = () => {

    console.log(this.state);

  };

 

  change = (e) => {

    // 属性名表达式

    this.setState({

      [e.target.name]: e.target.value,

    });

  };

 

　　// dom节点挂载成功后

  componentDidMount() {

    this.inputRef.current.focus(); // 实现input自动获取焦点

  }

 

  render() {

    const { userName, password } = this.state;

 

    return (

      <div>

        user:

        <input

          ref={this.inputRef}  

          name="userName"

          value={userName}

          onChange={this.change}

          type="text"

        />

        <br />

        psd:

        <input

          name="password"

          value={password}

          onChange={this.change}

          type="text"

        />

        <br />

        <button onClick={this.logintest}>denglu</button>

      </div>

    );

    // 受控组件  双向绑定 state + onChange

  }

}

export default Test;

 10.父子组件传值

父组件

import React, { Component } from "react";
import Son from "./Son";   //引入子组件

class Parent extends Component {
    constructor(){
        super()
        this.state = {
            age:32,
            name:'jkkk'
        }
    }
  getValue = (data) => {   // 接收子组件传过来的值
    console.log(data);  // 打印传递 过来的数据

}; 
render() {
 return (
    <div> 
　　　　父组件 
　　　　<Son name={this.state.name} age={this.state.age} callback={this.getValue} />   // 父组件传值
</div> 

 ); 
} 
}
 export default Parent;

 子组件：

import React, { Component } from "react";

class Son extends Component {
    toChuanzhi=()=>{                     // 子组件 -----> 父组件
        this.props.callback({            // 在callback里面传值给父组件
            name:'oooo',
            kkk:'kldkflds'
        })
    }
  render() {
    return (
      <div>
        zi组件
        <br />
         {this.props.name}-----{this.props.age}  // 接收父组件的值
         <button onClick={this.toChuanzhi}>点击传值给父组件</button>  
        <br />
      </div>
    );
  }
}

export default Son;

 11. react-router-dom 的使用

列表一

import React, { Component } from 'react'

export default class GoodsList extends Component {
    render() {
        return (
            <div>
                <ul>
                    <li>dfdsf</li>
                    <li>kdskfl</li>
                </ul>
            </div>
        )
    }
}

列表二

import React, { Component } from 'react'

export default class FoodList extends Component {
    render() {
        return (
            <div>
                <ul>
                    <li>1</li>
                    <li>12</li>
                    <li>123</li>
                </ul>
            </div>
        )
    }
}

index.jsx

import React, { Component } from "react";

import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import GoodsList from "./GoodsList";
import FoodList from "./FoodList";

export default class index extends Component {
  render() {
    return (
      <div>
        <Router>
          <div>
            <Link to="/a">GoodsList</Link> &nbsp;&nbsp;
            <Link to="/b">FoodList</Link>
            <div>
              <Route path="/a" component={GoodsList} />
              <Route path="/b" component={FoodList} />
            </div>
          </div>
        </Router>
      </div>
    );
  }
}