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