1.1 创建一个react项目
首先要安装node.js
运行node -v和npm -v 来判断node.js是否安装成功
然后利用命令
npx create-react-app appname 创建你的项目
cd appname 进入项目
npm start 开始项目
1.2 组件component
React中的组件就是页面中的一个一个不同的部分,创建一个组件非常简单,只需要让创建一个class,并让该class继承React.Component就可以,每个组件都必须有个render函数,该函数决定该组件在网页页面上是如何渲染的。自定义的组件名字以大写开头,HTML原生的组件或者标签则是以小写开头。
1.3 组件的监听事件
给button或者input等元素添加非原生的监听事件,比如onClick或者onChange等,后面紧跟一个函数,比如handleClick,利用onClick={this.handleClick.bind(this)}来引用该handleClick函数,该函数需要在组件中去单独实现。
这里为何要bind(this)呢?在handleClick之前的this代表的是整个大组件的环境,然后假如我们在handleClick函数中用到了this,这个this则是指的是一个小组件的环境,也就是这个this不是全局的this,而是局部的this,比如这里该函数是用于button这个小组件,那么这个this也仅仅指的是button的环境。因此通过bind(this)使得函数中的this指的是整个大组件的环境。
在React中,可以通过this.state.variable读取值,但是不可以直接通过给this.state.variable赋值来更改值。
1.4 组件的state
组件的state存储整个组件的数据信息,可以在constructor(props)函数中进行初始化,该函数必须要有super(props)语句用于继承父类的属性信息。对state的更改不要直接通过this.state进行更改,而应该利用this.setState({})函数进行修改。
[…this.state.list]是一个拓展展开式,它创建了一个列表,里面的内容是list中的内容,[…this.state.list,newConent]则表示在该列表后添加一个新的内容。
之所以用列表展开式而不直接用this.state.list是因为用列表展开式相当于创建了一个原来列表list的副本,然后我们这个副本进行更改,最后再将副本赋值给变量进行更新。通过创建副本来修改变量是一种良好的代码写作方式,在后续的测试中也会带来很大的优点,因此,推荐采用这种方式,而不是直接操作this.state.list.
1.5 父子组件和props
React中通过嵌套的关系就形成了父子组件.
父组件向子组件传递值。一个父组件可以向子组件传递一个变量,传递的形式就是在子组件中添加属性,比如
子组件向父组件传递值。子组件通过调用父组件传递过来的函数来传递值给父组件。首先在父组件中创建函数fun(para),参数就是子组件要向父组件传递的值。然后父组件将该函数通过属性传递给子组件,在子组件中调用该函数,函数的参数就是子组件要传给父组件的值。