React学习笔记2-初识React

这篇七个点：1 环境搭建， 2 JSX， 3 组件，4 数据流，5 生命周期，6 React与DOM，7 实例

1 环境搭建

1.1 引用React CDN

1.2 利用create-react-app脚手架

npm install -g cnpm --registry=https://registry.npm.taobao.org//使用淘宝镜像
npm config set registry https://registry.npm.taobao.org
set-ExecutionPolicy RemoteSigned //执行本地脚本
A
cnpm install -g create-react-app//安装脚手架
create-react-app my-app //创建文件
cd my-app/
npm start//配置完成

2 JSX

2.1 JSX为什么出现

React中创建虚拟元素分为：DOM元素和组件元素，分别对应原生元素与自定义元素。

• DOM元素

bolala

这样就在JS中创建了DOM的虚拟元素。

• 组件元素

let Button=({color,test})=>{
        return {
            type: 'button',
            props: {
                className:`btn-${color}`, children: {//模板字符串用反引号
                    type: 'b',
                    props: {
                        children: test}
                }
            }
        };
    };

封装的button元素，这种表达层层嵌套后会很复杂，JSX语法就产生了：

2.2 JSX基础语法

2.2.1 XML语法

注意点：

• 定义标签时，只允许被一个标签包裹！
• 标签一定要闭合。

2.2.2 元素类型
在JSX中，小写首字母对应DOM元素，组件元素对应大写首字母。
JSX还可以通过命名空间的方式使用组件元素。
要注意的是，在一个组件的子元素位置使用注释要用{}包起来。

2.2.3 元素属性
在JSX中，DOM元素和组件元素都有属性，DOM属性是标准规范属性，class改为className；for改为htmlFor，其他不变。
组件元素的属性是自定义属性，为实现组件所需要的参数。在写自定义属性时，要由标准写法改成小驼峰写法。
属性值要使用表达式，可以 用{}替换""；

3 组件

3.1 组件的演变

3.2 React组件的构建

React组件由三部分组成：属性（props），状态（state）以及生命周期方法。
React组件可以接收参数，也可能有自身状态。一旦接收到的参数或自身状态改变，组件就会执行相应的生命周期方法，最后渲染。

• 组件的构造方法。
  三种方法：1 React.createClass 最新版本已经放弃

2 ES6 classes方法

import React,{Component} from 'react';
import ReactDOM from 'react-dom';

class Button extends Component{
    constructor(props){
        super(props);
    }
    static defaultProps={
        name:"默认"
    };
    render(){
        return (
            {this.props.name}
        )
    }
}

ReactDOM.render(
    ,
    document.getElementById('root')
);

文件结构.png

3 无状态函数

function Bottom(props) {
    const sayHi=()=>{
        console.log(`Hello ${props.name}`);
    };
    return(
      

          
{props.name}
          显示
      
    )
}

ReactDOM.render(
    ,
    document.getElementById('root')
);

无状态组件只传入props和context两个参数，不存在state,也没有生命周期方法，组件本身就是render方法。

4 数据流

state与props是最重要的概念，如果顶层组件初始化props，React会向下遍历整个组件树，重新渲染。state只关心每个组件自己内部的状态。

4.1 state

一般优先使用Redux，它自身也能管理组件的内部状态。
当使用setState方法时，该组件会尝试重新渲染。

class Counter extends Component{
    constructor(props){
        super(props);
        this.state={count:2};
        this.handleClick= this.handleClick.bind(this);
    }
    handleClick(){
        this.setState({
            count:this.state.count+1
        })
    }
    render(){
        return (
            

                
{this.state.count}
                增加
            
        )
    }
}
ReactDOM.render(
    ,
    document.getElementById('root')
);

注意setState是一个异步方法，一个生命周期的所有setState方法会合并操作。

4.2 props

React的单向数据流，主要流动管道就是props，组件的props一定来自于默认属性或通过父组件传递。
React通过defaultProps静态变量的方式来定义。

class SayName extends Component{
    constructor(props){super(props);this.state={};}
    static defaultProps={
        name:"bolala"
    };
    render(){
      return (
          
{this.props.name}
      )
    }

}
ReactDOM.render(
    ,
    document.getElementById('root')
);

React.PropTypes 在 React v15.5 版本后已经移到了 prop-types 库。

class MyTitle extends React.Component {
  render() {
    return (
      
Hello, {this.props.title}
    );
  }
}
 
MyTitle.propTypes = {
  title: PropTypes.string
};
ReactDOM.render(
    ,
    document.getElementById('example')
);

5 生命周期

React生命周期分成三类：挂载，更新，卸载

5.1 组件挂载期

class App extends Component{
    constructor(props){
        super(props);this.state={};
        console.log("1 构造函数和state")
    }
    static defaultProps={
        name:"bolala"
    };
    componentWillMount(){
        console.log("2 首次渲染前");

    };
    render(){
        console.log("3 渲染");
        return (
            
{this.props.name}
        )
    }
    componentDidMount(){
        console.log("4 render渲染后");
    }
}
ReactDOM.render(
    ,
    document.getElementById('root')
);

5.2 组件更新期

class APPFather extends Component{
    constructor(props){
        super(props);this.state={};
        this.update=this.update.bind(this);
    }
    update(){
        this.setState({
            name:"Vue"
        })
    }
    render(){
        return (
            

                
                修改
            
        )
    }
}
class App extends Component{
    constructor(props){
        super(props);this.state={};
        console.log("1 构造函数和state")
    }
    componentWillMount(){
        console.log("2 首次渲染前");

    };
    render(){
        console.log("3 渲染");
        return (
            
{this.props.name1?this.props.name1:"bolala"}
        )
    }
    componentDidMount(){
        console.log("4 render渲染后");
    }
    componentWillReceiveProps(){
        console.log("5 父组件更新子组件props时");
    }
    shouldComponentUpdate(){
        console.log("6 props/state改变是否重新渲染");
        return true;
    }
    componentWillUpdate(){
        console.log("7 接受到新props/state，重新渲染前");
    }
    componentDidUpdate(){
        console.log("8 组件被重新渲染后");
    }
    // 执行的顺序是：1,2,3,4,5,6,7,3,8
}
ReactDOM.render(
    ,
    document.getElementById('root')
);

5.3 组件卸载期

componentWillUnmount() {
         console.log('Component WILL UNMOUNT!')
  }

index.png

6 React与DOM

6.1 ReactDOM

• findDOMNode
  组件的生命周期中，真正被添加DOM中的方法是componentDidMount和componentDidUpdate,ReactDOM。findDOMNode可以获取到真正的DOM元素。

class SayName extends Component{
    constructor(props){super(props);this.state={};}
    static defaultProps={
        name:"bolala"
    };
    componentDidMount(){
        console.log(ReactDOM.findDOMNode(this));
        //返回真实的DOM
    }
    render(){
      return (
          
{this.props.name}
      )
    }
}

• render
  参数1：组件，参数2：DOM元素，参数3：装载完毕执行的回调函数

ReactDOM.render(
    ,
    document.getElementById('root'),
    function () {
        console.log("加载完毕");
    }
);

6.2 refs

利用render可以得到组件的实例，但是在组件内部JSX并不会反悔一个组件的实例，refs就是为此出现的。refs组件被调用时会新建一个该组件的实例，而refs就会指向这个实例。

class Refs extends Component{
    constructor(props){
        super(props);this.state={};
        this.handle=this.handle.bind(this)
    }
    handle(){
        this.refs.name.focus();
        console.log(this.refs.name);//获得dom元素
    }
    render(){
        return (
            

                
                
            
        )
    }
}

对于DOM操作，不仅可以使用findDOMNode获取该组件DOM，还可以使用refs获取内部的DOM。
要获取一个React组件的引用，即可以使用this来获取当前react组件， 也可以使用refs获取子组件的引用。

class Clild extends Component{
    constructor(props){
        super(props);this.state={};
    }
    render(){
        return(
            

                
标题
                
bolalalala
            
        )
    }
}
class Refs extends Component{
    constructor(props){
        super(props);this.state={};
        this.handle=this.handle.bind(this)
    }
    handle(){
        this.refs.name.focus();
        console.log(this.refs.name);//获取input元素
        console.log(this.refs.title);//这个是实例
        console.log(ReactDOM.findDOMNode(this.refs.title));
        //这个是子组件的DOM
        console.log(ReactDOM.findDOMNode(this));
        //这个是整个组件的DOM
    }
    render(){
        return (
            

                
                
                
            
        )
    }
}

值得注意的是，findDOMNode和refs都无法用于无状态组建中，无状态组件挂载时只是方法调用，没有新建实例

7 实例

略