React笔记(不定时更新)

这个部分主要就是抄React官网的教程,以后找起来方便一点啦。
希望熟练了以后可以不用一直ref就好。
https://react.docschina.org/tutorial/tutorial.html#lifting-state-up

1,函数组件
如果你想写的组件只包含一个 render 方法,并且不包含 state,那么使用函数组件就会更简单。我们不需要定义一个继承于 React.Component 的类,我们可以定义一个函数,这个函数接收 props 作为参数,然后返回需要渲染的元素。函数组件写起来并不像 class 组件那么繁琐,很多组件都可以使用函数组件来写。
替换前:

1
2
3
4
5
6
7
8
9
10
11
    class Square extends React.Component {
    render() {
    return (
    <button> {this.props.onClick()}}
    &gt;
    {this.props.value}
    {/* value属性用的时候是this.props.value */}
    </button>
    );
    }
    }

替换后:

1
2
3
4
5
6
7
    function Square(props) {
    return (
    <button>
    {props.value}
    </button>
    );
    }

2,create-react-app

1
2
3
4
5
6
7
    # 全局安装
    npm install -g create-react-app
    npx create-react-app my-app
    cd my-app

    # 启动编译当前的React项目,并自动打开 http://localhost:3000/
    npm start

3,可以在Chrome浏览器上装一个React插件,名字叫:React Developer Tools

4,props和state的区别(b站视频里面总结的)
・props中的数据都是外界传递过来的;state中的数据都是私有的(通过Ajax获取回来的数据,一般都是私有数据)
・props中的数据都是只读的,不能重新赋值;state中的数据,都是可读可写的