【React】基础内容语法规则 1、标签中混入JS表达式的时候使用{}包住变量 2、class => classNam

语法规则

1、标签中混入JS表达式的时候使用{}包住变量

2、class => className(主要是避免组件化的class)

3、内联元素中的style使用，不能是字符串的使用，只能是使用双花括号style={{color:'red'}} fontSize:"20px" 驼峰法

4、根标签也是只有一个和Vue2是一致的

5、自定义组件得大写开头，默认为小写的为HTML原有默认标签

6、{}只能是表达式或则是个函数，那么react其实是没有v-for指令类的操作,只能是表达式所以不能有指令操作

7、事件使用方式onClick = {functionName},执行事件中的onClick需要是函数方法，如果是一个（）=>{}函数结果的话，就会在render函数渲染的时候也执行一次的

const usersOptions = ()=>{
    return <options/>
}
render(){
    return(
        <section>
    <h2 className="title-class">添加新文章</h2>
    <Lable/>
    <form>
        <label htmlFor="postTitle">文章标题:</label>
        <input
            type="text"
            id="postTitle"
            name="postTitle"
            value={title}
            onChange={onTitleChanged}
            style={{color:'red'}}
        />
        <label htmlFor="postContent">内容：</label>
        <textarea
            id="postContent"
            name="postContent"
            value={content}
            onChange={onContentChanged}
        />
        <label htmlFor="postAuthor">作者</label>
        <select
            id="postAuthor"
            value={userId}
            onChange={onAuthorChanged}
            placeholder="请选择作者名称"
        >
        <option value="请选择作者名称"></option>
            {usersOptions}
        </select>
        <Button type="button" onClick={onSavePostClicked} disabled={!canSave}>
        保存文章
        </Button>
    </form>
</section>
    )
}

模块化和组件化

1、模块：向外提供特定功能的js程序文件，实质上就是一个js文件

2、组件：用来实现局部功能效果的代码和资源的集合

这两个都是为了代码的复用,模块和组件的区别就是模块一般都是只有js的实现单个功能的一个文件，组件是为了将整个元素的css js 以及相关功能集合到一起的文件

组件定义方式

1、函数式：函数名称就是Componnet的名称

2、组件式：使用class来做一个组件，名称的使用方式和函数式一样，必须得继承React.Component 可以直接定义一个render函数来返回JSX组件数据

简单组件和复杂组件

1、是否有状态来区分复杂和简单，也即是判断是否有 state| props这样的数据传入来判断

2、state|props|refs

3、通过修改变量状态来完成对应的UI的渲染

class MyComp extend React.component{
// 这样通过使用箭头函数可以减少绑定事件的操作,否则需要在构造函数中调用 this.onBtnClick = this.onBtnClick.bind(this)
    state = { isHot: false}
    onBtnClick = ()=>{
        this.setState({
            isHot: !state.isHot
        })
    }
    render(){
        return<h1 onClick={this.onBtnClick}>点击变换值</h1>
    }
}

多个地方使用了同一组件之后，是否会产生问题对于上诉的操作中？是否是个静态的数据，还是必须是使用static来标志的才是静态数据，在javascript中只有被标识了static关键字的才是静态属性，其他都属于实例属性

不能直接更改state(状态)中的数据this.state.isHot = false ，需要借助React.APIthis.setState({ isHot:false }),来进行状态更改,setState方法是对state数据的合并，在setState执行之后会执行render函数下,也可以使用一些hook函数来操作，React.useState(post.title);

// 直接使用useState来直接修改对应的state值也就没必要执行setState函数了
const [title, setTitle] = React.useState(post.title);
const [content, setContent] = React.useState(post.content);
const onTitleChanged = (e) => setTitle(e.target.value);
const onContentChanged = (e) => {
    setContent(e.target.value);
};

props

操作方式
类型限制 直接给class上添加对应的 propTypes 和 defaultProps 来限制默认类型和默认值

Prop-types.js引入对标签属性的限制
Person.propTypes = {
name: PropTypes.string.isRequired //string类型 这直接在react中使用ts就好了么
}
// 函数 PropTypes.string
Person.defaultProps = { // 默认值标签
    name: '小兰'
}

refs

ref来标识组件，类似于属性id

// 过时的已经
this.refs.input1 // 这里的refs.input1 是真是的DOM元素
render(){
    return <input ref="input1" />
}

string的refs会有效率问题，可能会出现问题

// 其中这个el是input元素本身
render(){
    return <input ref={ el => this.input1 = el }/>
}

回调形式的ref，回调执行次数的问题，在更新的时候会在执行setState的时候会这个ref回调函数会被调两次。下列操作可以避免两次调用，但是总体不会有什么影响即使调用两次

getInputRef = (el)=>{
    this.input1 = el
}
render(){
    return <input ref={this.getInputRef}/>
}

React.createRef

let myRef = React.createRef() //只能存放1个
showData = ()=>{
    console.log(this.myRef.current.value)
}
render(){
    return  <input ref={this.myRef}/>
}

受控组件和非受控组件

但是具体的区别到底是什么？受控组件是可以省去使用refs来操作

高阶函数：接收或是返回的数据是一个函数就是一个高级函数；函数柯里化：函数闭包么？在函数中返回函数。