了解react记录1-三大核心属性

jsx语法规则:

1.定义虚拟DOM时，不要写引号。
2.标签中混入JS表达式时要用。
3.样式的类名指定不要用class，要用className。
4.内联样式,要用style={{key : value}}的形式去写。5.只有一个根标签
6.标签必须闭合
7.标签首字母
    (1).若小写字母开头，则将改标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
    (2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。|

模块化和组件化开发

模块：提供特定功能的js程序，即js文件作用：复用js,简化js的编写,提高js运行效率e
组件：用来实现局部功能效果的代码和资源的集合(html/css/js/image)等等作用：复用编码,简化项目编码,提高运行效率

模块化：应用js都以模块来编写。
组件化：应用以多组件的方式实现。

react学习

20201223周三

js创建虚拟dom

<script type="text/javascript">
    // 创建虚拟dom
    const VDOM = ReactDOM.createElement('h1',{id:'title'},ReactDOM.createElement('span',{},'hello,react'))
    // 渲染虚拟dom到页面
    ReactDOM.render(VDOM,document.getElementById('test'))
</script>

jsx创建虚拟dom

<script type="text/babel">
    //创建虚拟dom
    const VDOM = (  //翻译后： const VDOM = ReactDOM.createElement('h1',{id:'title'},ReactDOM.createElement('span',{},'hello,react'))就是原生js
        <h1>
            <span>Hello,react</span>
        </h1>
    )
    //渲染到页面
    ReactDOM.render(VDOM,document.getElementById('test'))
</script>

关于虚拟DOM:
1.本质是0bject类型的对象(一般对象)
2.虚拟DOM懂较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上。

20201224周四

{}可写js表达式
react如何区分原生标签与react自定义组件标签？通过标签首字母区分，原生小写，react标签为大写。

【函数式组件】类名大写，直接返回dom
【类式组件】必须继承React.Component，并且定义render(){}方法在render方法中返回dom

//1.创建类式组件
class MyComponent extends React.Component{
    render(){
        //render是放在哪里的?—MyComponent的原型对象上，供实例使用。
        return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
    }
}

类实例对象重要属性：【【1、state】】

可把数据存放到该属性上其本质：state = {}

原生html的标签属性有所更改，如：class写className、onclick写onClick、onblue写onBlue
事件绑定
1、无法直接通过方法名引用方法，因为方法需要实例引用。
2、组件类外定义的方法无法获取到组件类属性state
3、只有通过组件类实例调用方法时，方法内this才是组件类实例。才能通过this调用state。
4、建议组件类内部定义实现某一功能的方法，render(){}标签内属性通过this直接引用方法。需要绑定方法的this，通过【this.xxx(实例对象的) = this.xxx(原型链上的).bind(this)】绑定。

定义方法：function demo(){}
组件类构造方法中绑定this：this.demo = this.demo.bind(this)

事件错误使用：return <h1 onclick={demo()}></h1>
事件正确使用：return <h1 onclick={this.demo}></h1>

关于this(个人理解)

自定义组件没有state state是【React.Component】的原型上的
方法中绑定this：【this.xxx(实例对象的) = this.xxx(原型链上的).bind(this)】 
通过此方法中的this就指向了【React.Component】的this，可以通过this.state调用state了。
前面的xxx是变量名，后面的xxx必须是在原型链上存在的。两者定义的【名称】可以不一样。在render中用的是前面的xxx。

20201216周六

状态(state)不可直接更改。

this.state.isHot = !isHot //错误的写法 【直接赋值】。
this.setState({isHot:!isHost})  //正确写法 【调用内置函数赋值】，该种修改state中的值是合并不是替换，即state中的数据同名覆写，不同名保持

自己创建的组件
① 构造器：调用一次。
② render方法：调用1+n次【1=初始化，n=每次更新状态调一次，更新几次调用几次】
问题：如果有多个方法this需要绑定，在构造方法需要定义非常多的【this.xxx(实例对象的) = this.xxx(原型链上的).bind(this)】
解决：通过箭头函数解决

changeweather = ()=>{
      const isHot = this.state.isHot;
      this.setstate({isHot : !isHot});
}

state小结

类有原型，类创建的对象实例自身和原型不关联。【类对象实例->类->类继承的父类】则构成原型链，当调用一个什么的时候，当前找不到就顺着原型链往上找。
state可以直接在自定义组件类上面赋值，不必在构造器中赋值。
自定义方法--用赋值语句形式+箭头函数。这样方法就不用绑定了。箭头函数没有自己的this，就会往上找，
state无法直接修改，需通过内置方法修改

类实例对象重要属性：【【2、props】】

props 组件传递过来的参数，如在使用组件标签时定义的属性

ReactDOM.render(<Person name="jerry" /> ,document.getElementById('test'))  //props中默认搜集标签中的属性如：name props中会包含[name]

const p = {name:'老刘',age: 18, sex:'女'}
ReactDOM.render(<Person {...p}/>,document.getElementById('test3')) // 通过【...】传递属性  props中会包含[name,age,sex]

【...】展开运行符

【props】属性限制

**代码在组件类外写**

1、类型限制：
定义规则方式：
组件名称.propTypes = {
    //name:React.PropTypes.string  // PropTypes 15.5版本之前React有该属性 可以这样用【React.PropTypes】，16版本的时候不从这里取了，封装了【prop-types.js】
    //name:PropTypes.string          // 引入【prop-types.js】有了全局对象PropTypes
    //name:PropTypes.string.isRequired  //isRequired 表示 name属性必须传递过来，否则保错。
}
类型：
string 字符串
number 数字
func 函数


2、设置默认值：使用标签时没传递相关属性，在render中也可以读到，读到的是默认设置的
定义规则方式：
组件名称.defaultProps = {
    name:'xiaoai'   //name默认值为xiaoai
}

【props】默认是只读的
如何把【props】属性限制定义到组件类中
只要保证类自身拥有规则属性，就能进行规则限制。所以可以直接在类中定义规则，把组件名称.去掉,如：

**代码在组件类中写**

static defaultProps = {
    name:'xiaoai'   //name默认值为xiaoai
}

构造函数与props

constructor(props){
      //构造器是否接受props，是否传递给super，取决于:是否希望在构造器中通过this访问props
      super(props)
      console.log('constructor' ,this.props);
}

函数式组件使用props
函数式组件只可以使用组件三大核心属性中的props。
属性限定只能定义在函数外。
为什么可以使用props？因为函数可以接收props

function Person (props){
    const {name,age,sex} = propsreturn(
    <ul>
        <li>姓名: {name}</li>
        <li>性别: { sex}</li>
        <li>年龄: {age}</li>
    </ul>
}
//渲染组件到页面
ReactDOM.render(<Person name="jerry" sex="女" age={18}/>, document.getElemertById('test1'))

类实例对象重要属性：【【3、refs】】

组件内的标签可以定义【ref属性】来标识自己。组件类中属性refs会搜集组件类中所有标签ref属性。
通过【refs.ref名称】可以拿到ref对应的真实dom节点。
1、字符串形式的ref

**代码在组件类中**
render(){
    return(
        <div>
              <input ref="input1" type="text" placeholder="点击按钮提示数据"/>  //ref通过回调函数把当前节点放到了实例对象中
              <button onclick={this.showData}>点我提示左侧的数据</button>
        </div>
    )
}
//展示左侧输入框的数据
showData = ()=>{
    const {input1} = this.refs
    alert(input1.value) 
}

2、回调函数的ref

**代码在组件类中**

render(){
    return(
        <div>
              <input ref={currentNode => this.input1 = currentNode} type="text" placeholder="点击按钮提示数据"/>  //ref通过回调函数把当前节点放到了实例对象中
              <button onclick={this.showData}>点我提示左侧的数据</button>
        </div>
    )
}
//展示左侧输入框的数据
showData = ()=>{
    const {input1} = this //由于ref已把input1放了进来，所以可以在this中获取
    alert(input1.value) 
}

回调ref中执行次数：
内联方式=render更新过程中会被执行两次，第一次传参null，第二次传参当前dom节点。
回调函数通过定义成class绑定函数的方式可避免该问题。
两者没啥影响，一般还是直接写内联比较多。

3、createRef
当前比较推荐的一种形式
React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点，该容器是“专人专用”的，只保存一个ref

**以下代码都在组件类内**

//定义一个ref
myRef2 = React.createRef()

//绑定ref
<input onBlur={this.showData2] ref={this.myRef2} type="text" placeholder="失去焦点提示数据"/>

//使用ref
showData2 = ()=>{
    alert(this.myRef2.current.value);
}

posted @ 2020-12-27 00:39 小艾影阅读(120) 评论(0) 编辑收藏举报

刷新页面返回顶部

小艾影