React的一些理解(部分)

ゝ一纸荒年。 2023-05-31 07:47 4阅读 0赞

# React #

*  在组件的return()中，所有H5元素集合中要用一个标签把所有的标签都包裹起来(通常用< div >…< /div >)。
 *  如果要给一个标签元素添加一个自定义属性的话用data-(XX)前缀,前缀可以自己起，data-是一定要的。
 *  jsx中可以使用js，因为JSX本身就是JS编写的。
 *  在React中使用css样式的话不要写class，用className，因为在es6中class是一个保留字，还有一个就是for要写成mtmlFor。同时要注意的是命名一般都是用单驼峰命名法。
 *  标签与组件的渲染
    
     *  类似于 var myDiv = < div className=“divNmae”/>这样的都是创建了一个标签变量，用来放入页面中进行渲染。要注意的是变量名和标签名如果是原生的标签名要用到小写
     *  同理的还有组件的创建，如果组件的变量名是自己设的要用到大写。
 *

像以上这行代码串中，element就是用标签来表示了一个函数，并给他一个变量名来放到页面中。

function HelloMessage(props) {
        return <h1>Hello World!{props.name}</h1>;//获取参数
    }
    const element = <HelloMessage name="123"/>;//设置参数

像在以上代码汇总，函数在< h1>标签的元素里放了一个参数，获取的时候通过props这个属性来获取。

*  React中的函数能写成类标签的形式。
 *  var 变量 = <标签>xxx</标签>
    
     *  这样的形式是JSX语法。优点是语义化等…

*  为什么要用JSX？
    
     *  React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，所以将标记和逻辑共同存放在称之为“组件”的松散耦合单元之中。即在React中，认为H5、CSS与JS是有相同点的，所以索性直接把这三兄弟融为一体，即产生了JSX这种语法。
 *  在 JSX 语法中，你可以在大括号内放置任何有效的 JavaScript 表达式，大括号放在标签之间。
 *  在属性中嵌入 JavaScript 表达式时，不要在大括号外面加上引号。你应该仅使用引号（对于字符串值）或大括号（对于表达式）中的一个，对于同一属性不能同时使用这两种符号。
 *  属性的名称命名使用小驼峰命名法。
 *  如果只有单个标签，那么这个标签可以直接闭合，如果有多个的话要分开
    
     *  闭合
    
        const element = < img src={ user.avatarUrl} />;
    
     *  分开
    
        const element = (
        <div>
        <h1>Hello!</h1>
        <h2>Good to see you here.</h2>
        </div>
        );
 *  JSX 由于会有转化的这一个步骤，所以能防止注入攻击。
 *  元素是react的最小单位，多个元素组成了组件
 *  想要将一个 React 元素渲染到根 DOM 节点中，只需把它们一起传入 ReactDOM.render()
 *  React是一个不可更新对象，即生成好后无法变化，想要变化只能重新生成一个。即React的渲染每次只会渲染一遍，渲染完成后不可改变，想要改变只能重新渲染。
 *  React在渲染dom的时候会预先渲染一遍，然后再渲染有改变的部分。这个渲染所采用的算法叫做diff算法。
 *  函数也可以是组件，一般也只会在简单的组件上用函数来写组件。
 *  在元素为自定义组件的时候，JSX的属性(参数)会转化为一个对象给组件，这个对象就叫做props。(个人理解props就是父组件的属性或者说是值，因为子组件有时候需要用到父组件的值，所以通过props这个对象来传递到子组件给子组件使用，也正是因为props是父组件的值，所以子组件是不能改变props的值的，子组件自身的值放在state中，想要改变可以通过setState这个方法来改变自身的值。)  
    组件不能更改自身的props。  
    props是一个不可改变的对象，所以React提供了一个可以改变的，即state。  
    每个组件都是只管按代码逻辑处理传进来的参数并传给给指定的下一个组件，其他的都不管，所以数据就像是瀑布里的水一样不断的流动而不会停止或者返回，即数据是向下流动的。所以一个组件的数据只能影响其子组件的数据，即数据是单向的。
 *  bind()方法创建一个新的函数，在bind()被调用时，这个新函数的this被bind的第一个参数指定，其余的参数将作为新函数的参数供调用时使用。
 *  在javasrcipt中，A&&B如果为真，结果会返回B，否则是返回A。利用这个特点可以把不成立后的逻辑放左边，成立的逻辑放右边。
 *  在创建多个重复的元素的时候(例如多个li元素)，最好是给一个key，也就是一个标志。以id为最优，没有id就index，但是用index来区别li的时候最好能保证li的顺序不会频繁的改变，以免React因为index的改变而频繁的重复渲染，降低效率。同时index在一些情况下会不如人意。
 *  key属性的设置时机:在map() 方法中的元素需要设置 key 属性。
 *  key值的设置只需要在兄弟节点间是独一无二的就可以了。例如有ul1与ui2，ul1里有li的key值为1与ul2里的li也有一个key值为1，那么是没关系的，因为他们不是兄弟节点，而ul1里有两个li，这两个li的key都为1，那么就有关系了。
 *  key值只会给React读取，组件里的函数是无法读取的，如果想让组件也能读取就需要重新设置一个属性也指向这个key。例如:

const content = posts.map((post) =>
     	<Post
        	key={post.id}
        	id={post.id}
        	title={post.title} />
    	);

在post中，key值是无法被获取的，因而重新设置了id值也是指向post.id，让函数获取id。

*  React是什么？
 *  目前我个人感觉是如果把前端比作是一个人，那么Html就相当于是一个人的骨头，有了Html这个人的大小，体型才有了一个基本的框架。JS就好比是人身上血与肉，有了血和肉人才能动起来。Jquery相对于原生的JS就好像是人身上的肌肉，能帮人运动的强度更大，做事做的更快更强。而CSS就好比是人身上的衣服，有了CSS，这个人才不至于赤身裸体。  
    那么React这个框架如果用以上的概念相当于是什么呢？React里的一个很重要的思想就是组件化。什么是组件化？就好比说人身上有手脚身体头四个部位，每个部位放到React里都是一个组件，四个组件一拼到一起，一个人就成了。React就是一个写组件的JS框架。比如说我写一个手这个部位的组件，这个组件写好后有手的骨头，手的肌肉，还有手这个部位的衣服。可以说组件就是把CSS，Html,JS拼到了一块。以前是三个元素单方面作战，到JS时期的JS指挥Html和CSS，到现在框架的三个元素共同协作。

*  比如说官网里跳跳棋的demo，由三个组件组成，一个Game.js，一个是Board.js,一个是Square.js。Square.js负责控制每个棋格的显示，Board.js负责组成所有的棋格，Game.js负责回溯之前的棋路。三个组件拼在一起就形成了一个完整的跳跳棋。

*  Props
    
     *  这个玩意是父组件的参数。并且由于这个参数是从父组件拿来的，所以子组件是只能拿来用，无法拿来修改的。为了弥补这个缺点所以后面还引出来了State这个玩意，这个玩意是子组件自身的参数，所以是可以修改的。
 *  State
    
     *  这玩意就用来设置组件自身的属性的地方。Props是用来存父组件的，这个就是自身的。
 *  Super
    
     *  Super就是一个调用父组件参数的方法。例如现在父组件有很多参数，都在Props中，但是怎样才能把Props调用到子组件中呢？就是用Super这个方法。
 *  constructor
    
     *  用来指向实例化对象的构造函数。意思就是说在这个函数里创建的变量都会通过这个函数把其中设置的变量放到实例的构造函数里(以便之后这个组件的子组件调用？？？ 好像还有一个功能是用来对参数进行集中的管理。)
 *  componentWillMount
    
     *  这个是在将要渲染之前会进行调用，即render()之前。同时能在服务器端和浏览器端调用。
 *  componentDidMount
    
     *  这个是在渲染后进行调用，只能在浏览器端进行调用，服务器端不行。
 *  stopPropagation
    
     *  可以阻止documt事件的传播。例如一个ul里三个li都绑定了click，其中一个触发后stopPropagation可以避免cilck事件传播到其他两个li。