React学习笔记

React脚手架安装成功后

全局下载使用命令npm install -g create-react-app
安装完成后每次新建项目无需再次安装，只需执行命令行 create-react-app my-app

进入my-app ：cd my-app

启动命令：npm start

打包：npm run build

 

***搭建一个页面指导思想
1.布局是什么样的 上下还是左右
2.静态数据页面的实现
3.动态数据页面的初始化实现
4.动态数据页面的交互实现
父级组件中给子组件传数据用state
子组件接受从父组件用props

state 状态的操作：初始化 读取 更新

 

 class Like extends React.Component{

        constructor(props){

            super(props) //将参数props传给父类型React.Component

            //初始化状态

            this.state={

                isLikeMe:false

            }

            //将新增方法中的this强制绑定为组件对象,后期可以使用箭头函数简化掉

            this.handleClick = this.handleClick.bind(this)

        }

//新增方法：内部this默认不是组件对象，而是undefined

        handleClick(){

            console.log('handleClick',this)

            //得到状态并取反

            const isLikeMe = !this.state.isLikeMe

            //更新状态

            // this.setState({isLikeMe:isLikeMe})

            this.setState({isLikeMe})

        }

//重写组件方法

        render(){

            //读取状态

            //const isLikeMe = this.state.isLikeMe

            const {isLikeMe} = this.state

            return <h2 onClick={this.handleClick}>{isLikeMe?'你喜欢我':'我喜欢你'}</h2>

        }

    }

 

 

 

 //定义组件属性默认值

        Person.defaultProps = {

            sex: '男',

            age: 18

        }

 //对属性进行限制如指定类型和是否必须传值

        Person.propTypes = {

            name: PropTypes.string.isRequired,

            age: PropTypes.number

        }

// ReactDOM.render(<Person name={p1.name} age={p1.age} sex={p1.sex}/>,document.getElementById('test'))

// ...的作用 打包参数数据为数组包 解包将数组参数包进行解包

ReactDOM.render(<Person {...p1} />, document.getElementById('test'))

 

 

 

动态数据保存在哪个组件里

        分析：

            看数据时某个组件需要还是某些组件需要

            页面要展示的数据是一个数组 因为两个组件都需要对该数组进行操作 一个添加 一个展示

            所以将数据存放在两者的父组件最好

 

            问题：子组件中改变父组件中的状态

            子组件中不能改变父组件中的状态 

            状态在哪个组件,更新状态的行为就应该定义在哪个组件

            解决方案：父组件定义函数 传递给子组件  子组件调用

            组件化编写整体流程

                1.拆分组件 定义n个组件类

                2.实现静态组件（只有静态组件 没有动态数据和交互

                3.实现动态组件

                    1.实现初始化数据动态显示

                    2.实现交互功能

 

 

//  箭头函数中的箭头代表两个作用 一个是函数 一个返回 用上花括号的话就要加上return

 /*

        收集表单数据两种方式

        1.可控组件 表单项数据可以自动收集 例如下面那个密码通过事件和状态的绑定 收集到state里去

        2.不可控组件 需要时才手动读取表单输入框中的数据 例如下面的用户名表单是通过ref来获取值

    

    */

 //  (input) => this.input =input

                    //  将input组件绑定到this.input上去，第一个组件是指的当前dom元素

 

<form action="/test" onSubmit={this.handSubmit}>

                            name:<input type="text" ref={input=>this.name=input} />

                            password: <input type="password" value={this.state.pwd} onChange={this.handleChange}/>

                            <input type="submit" value='ok' />

                        </form>

// 当有事件绑定到某个控件上是可以通过event参数来获取该控件上的值

            handleChange(event){

                //读取输入的值

                const newpwd = event.target.value

                //更新pwd的状态     

                this.setState({

                    pwd:newpwd

                })

            }

 

 

 

 

 handSubmit(event){

                //阻止事件默认行为（如表单提交）

                event.preventDefault()

                // 模板字符串

                alert(`${this.name.value}  ${this.state.pwd} `)

            }

 

react 中前后端数据交互方式 原生态的ajax jq的ajax axios fetch